Choropleth with svg filter

Based on Mike Bostock's example for a choropleth map and merging states II map

Merges features based on quantized employment level. Adds an svg filter to each merged features level. It also builds the features layer by layer to ensure that shadows seem consistent.

Looks nice, but quite slow to load due to the filters.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.counties {
  fill: none;
  stroke: none;
}

.states {
  fill: none;
  stroke-width: 0.2;
  stroke: rgb(8,48,107);
  stroke-linejoin: round;
}

.q0-9 { fill:rgb(247,251,255); 
  stroke-width: 0.2;
  stroke: rgb(222,235,247);
  stroke-linejoin: round;}
  
.q1-9 { fill:rgb(222,235,247); 
  stroke-width: 0.2;
  stroke: rgb(198,219,239);
  stroke-linejoin: round;}
  
.q2-9 { fill:rgb(198,219,239); 
  stroke-width: 0.2;
  stroke: rgb(158,202,225);
  stroke-linejoin: round;}
  
.q3-9 { fill:rgb(158,202,225); 
  stroke-width: 0.2;
  stroke: rgb(107,174,214);
  stroke-linejoin: round;}
  
.q4-9 { fill:rgb(107,174,214); 
  stroke-width: 0.2;
  stroke: rgb(66,146,198);
  stroke-linejoin: round;}
  
.q5-9 { fill:rgb(66,146,198); 
  stroke-width: 0.2;
  stroke: rgb(33,113,181);
  stroke-linejoin: round;}
  
.q6-9 { fill:rgb(33,113,181); 
  stroke-width: 0.2;
  stroke: rgb(8,81,156);
  stroke-linejoin: round;}
  
.q7-9 { fill:rgb(8,81,156); 
  stroke-width: 0.2;
  stroke: rgb(8,48,107);
  stroke-linejoin: round;}
  
.q8-9 { fill:rgb(8,48,107); 
  stroke-width: 0.2;
  stroke: rgb(8,48,107);
  stroke-linejoin: round;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>

var width = 960,
    height = 600;

var rateById = d3.map();

var quantize = d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

var projection = d3.geo.albersUsa()
    .scale(1280)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select(".svg1");

queue()
    .defer(d3.json, "/../../data/us.json")
    .defer(d3.tsv, "/mbostock/raw/4060606/unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready);

function ready(error, us) {

svg.append("path")
      .datum(selection0)
      .attr("class", "q0-9")
      .attr("d", path)
	  .attr("filter","url(#f3)");
	
  svg.append("path")
      .datum(selection1)
      .attr("class", "q1-9")
      .attr("d", path)
	  .attr("filter","url(#f3)");

svg.append("path")
      .datum(selection2)
      .attr("class", "q2-9")
      .attr("d", path)
	  .attr("filter","url(#f3)");

svg.append("path")
      .datum(selection3)
      .attr("class", "q3-9")
      .attr("d", path)
	  .attr("filter","url(#f3)");

svg.append("path")
      .datum(selection4)
      .attr("class", "q4-9")
      .attr("d", path)
	  .attr("filter","url(#f3)");

svg.append("path")
      .datum(selection5)
      .attr("class", "q5-9")
      .attr("d", path)
	  .attr("filter","url(#f3)");

svg.append("path")
      .datum(selection6)
      .attr("class", "q6-9")
      .attr("d", path)
	  .attr("filter","url(#f3)");

svg.append("path")
      .datum(selection7)
      .attr("class", "q7-9")
      .attr("d", path)
	  .attr("filter","url(#f3)");

svg.append("path")
      .datum(selection8)
      .attr("class", "q8-9")
      .attr("d", path)
	  .attr("filter","url(#f3)");

svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);	
	  
}

d3.select(self.frameElement).style("height", height + "px");

</script>

</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Changed /mbostock/raw/4090846/us.json to a local referenece

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js