Choropleth

Choropleth design invented by Charles Dupin. Colors by Cynthia Brewer. Data from the Bureau of Labor Statistics, by way of Nathan Yau. Albers projection derived from work by Tom Carden. U.S. state and county boundaries from the U.S. Census Bureau, simplified using GDAL and MapShaper.

Source Code

 1 var data; // loaded asynchronously
 2 
 3 var path = d3.geo.path();
 4 
 5 var svg = d3.select("#chart")
 6   .append("svg:svg");
 7 
 8 var counties = svg.append("svg:g")
 9     .attr("id", "counties")
10     .attr("class", "Blues");
11 
12 var states = svg.append("svg:g")
13     .attr("id", "states");
14 
15 d3.json("../data/us-counties.json", function(json) {
16   counties.selectAll("path")
17       .data(json.features)
18     .enter().append("svg:path")
19       .attr("class", data ? quantize : null)
20       .attr("d", path);
21 });
22 
23 d3.json("../data/us-states.json", function(json) {
24   states.selectAll("path")
25       .data(json.features)
26     .enter().append("svg:path")
27       .attr("d", path);
28 });
29 
30 d3.json("unemployment.json", function(json) {
31   data = json;
32   counties.selectAll("path")
33       .attr("class", quantize);
34 });
35 
36 function quantize(d) {
37   return "q" + Math.min(8, ~~(data[d.id] * 9 / 12)) + "-9";
38 }