Last active
August 29, 2015 14:16
-
-
Save mimno/6a038f1790a1d69bb01b to your computer and use it in GitHub Desktop.
Maps with fade-in borders
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> | |
<!-- Load the d3 library. --> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<style> | |
/* put a border around the svg element so we can see the coordinate system better. */ | |
body { font-family: "Open Sans"; } div { margin: 30px; } | |
</style> | |
</head> | |
<body> | |
<div>I'm trying to replicate an effect on old maps like <a href="http://su14tmn.ryancordell.org/">this one</a> where a region has a hard exterior border color that gradually fades out to the interior of the region. | |
I borrowed some ideas and code from <a href="http://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3">this page</a> and <a href="http://www.xanthir.com/b4Yv0">this one</a>. The color scheme is from <a href="http://colorbrewer2.org/">Color Brewer</a>, and the map is made with D3. | |
</div> | |
<!-- The SVG element will go in here --> | |
<div> | |
<svg id="map"> | |
<filter id="inset-shadow-green" x="-50%" y="-50%" width="200%" height="200%"> | |
<feComponentTransfer in="SourceAlpha"> | |
<feFuncA type="table" tableValues="1 0" /> | |
</feComponentTransfer> | |
<feGaussianBlur stdDeviation="5" result="blur"/> | |
<feOffset dx="0" dy="0" result="offsetblur"/> | |
<feFlood flood-color="rgb(127,201,127)" result="color"/> | |
<feComposite in2="offsetblur" operator="in"/> | |
<feComposite in2="SourceAlpha" operator="in" /> | |
<feMerge> | |
<feMergeNode in="SourceGraphic" /> | |
<feMergeNode /> | |
</feMerge> | |
</filter> | |
<filter id="inset-shadow-purple" x="-50%" y="-50%" width="200%" height="200%"> | |
<feComponentTransfer in="SourceAlpha"> | |
<feFuncA type="table" tableValues="1 0" /> | |
</feComponentTransfer> | |
<feGaussianBlur stdDeviation="5" result="blur"/> | |
<feOffset dx="0" dy="0" result="offsetblur"/> | |
<feFlood flood-color="rgb(190,174,212)" result="color"/> | |
<feComposite in2="offsetblur" operator="in"/> | |
<feComposite in2="SourceAlpha" operator="in" /> | |
<feMerge> | |
<feMergeNode in="SourceGraphic" /> | |
<feMergeNode /> | |
</feMerge> | |
</filter> | |
<filter id="inset-shadow-orange" x="-50%" y="-50%" width="200%" height="200%"> | |
<feComponentTransfer in="SourceAlpha"> | |
<feFuncA type="table" tableValues="1 0" /> | |
</feComponentTransfer> | |
<feGaussianBlur stdDeviation="5" result="blur"/> | |
<feOffset dx="0" dy="0" result="offsetblur"/> | |
<feFlood flood-color="rgb(253,192,134)" result="color"/> | |
<feComposite in2="offsetblur" operator="in"/> | |
<feComposite in2="SourceAlpha" operator="in" /> | |
<feMerge> | |
<feMergeNode in="SourceGraphic" /> | |
<feMergeNode /> | |
</feMerge> | |
</filter> | |
</svg> | |
</div> | |
<script> | |
var width = 960, | |
height = 500; | |
var projection = d3.geo.albersUsa(); | |
var path = d3.geo.path().projection(projection); | |
var svg = d3.select("#map") | |
.attr("width", width) | |
.attr("height", height); | |
var counties, states; | |
d3.json("us.json", function(error, shapes) { | |
counties = topojson.feature(shapes, shapes.objects.counties).features; | |
states = topojson.feature(shapes, shapes.objects.states).features; | |
var shadowURLs = ["url(#inset-shadow-green)", "url(#inset-shadow-purple)", "url(#inset-shadow-orange)"] | |
var randomShadow = function() { | |
return shadowURLs[ Math.floor(Math.random() * 3) ]; | |
} | |
var statePaths = svg.append("g"); | |
statePaths.selectAll("path").data(states).enter() | |
.append("path").attr("d", path) | |
.style("fill", "#EEE").style("stroke", "#ccc") | |
.attr("filter", randomShadow); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment