mimno/index.html

## index.html
<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>

## us.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<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>