Learning D3 Part 7: Choropleth Maps
Update: I’m releasing a series of screencast tutorials on D3 at deveo.tv. Check it out and let me know what you think!
Choropleths are maps that indicate variations in data using different shades of color. Turns out you can easily build these using something like D3. How does that work?
// create a geo path - https://github.com/mbostock/d3/wiki/Geo-Paths
var path = d3.geo.path();
// create an svg element
var svg = d3.select("#chart")
.append("svg");
// create a container for counties
var counties = svg.append("g")
.attr("id", "counties")
.attr("class", "Blues");
// create a container for states
var states = svg.append("g")
.attr("id", "states");
// load the county shape data
d3.json("../data/us-counties.json", function(json) {
// create paths for each county using the json data
// and the geo path generator to draw the shapes
counties.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("class", data ? quantize : null)
.attr("d", path);
});
// load the state shape data
d3.json("../data/us-states.json", function(json) {
// create paths for each state using the json data
// and the geo path generator to draw the shapes
states.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("d", path);
});
// load the unemployment by county data
d3.json("unemployment.json", function(json) {
data = json;
// for each county, set the css class using the quantize function
// (an external CSS file contains the css classes for each color in the scheme)
counties.selectAll("path")
.attr("class", quantize);
});
// quantize function takes a data point and returns a number
// between 0 and 8, to indicate intensity, the prepends a 'q'
// and appends '-9'
function quantize(d) {
return "q" + Math.min(8, ~~(data[d.id] * 9 / 12)) + "-9";
}
And the CSS classes for each shade of blue:
.Blues .q0-9{fill:rgb(247,251,255)}
.Blues .q1-9{fill:rgb(222,235,247)}
.Blues .q2-9{fill:rgb(198,219,239)}
.Blues .q3-9{fill:rgb(158,202,225)}
.Blues .q4-9{fill:rgb(107,174,214)}
.Blues .q5-9{fill:rgb(66,146,198)}
.Blues .q6-9{fill:rgb(33,113,181)}
.Blues .q7-9{fill:rgb(8,81,156)}
.Blues .q8-9{fill:rgb(8,48,107)}
Continue with the D3 Series:
- Learning D3 Part 1: Selections, Properties, Data
- Learning D3 Part 2: Enter and Exit
- Learning D3 Part 3: Animation & Interaction
- Learning D3 Part 4: Intro to SVG Graphics
- Learning D3 Part 5: Axes
- Learning D3 Part 6: Scales & Colors
- Learning D3 Part 7: Choropleth Maps
[…] as a javascript visualization library that includes mapping capability (http://d3js.org/, esp.https://synthesis.sbecker.net/articles/2012/07/18/learning-d3-part-7-choropleth-maps). The caveat is, according to Michael, that this seems to be targeted at people who are already […]
[…] the RGB values are a nice range of blues from learning-d3-part-7-choropleth-maps. Also, we’re using the excellent underscore.js library here to flatten-out our data into an […]
This tutorial has been very helpful in creating my project.
On “load the unemployment by county data”, it looks like you missed the step to enter() so it will loop through the data to quantize the color, which is the heart of chloropleths.
Also, you have spelled the word as Choropleth consistently. Now, that makes me confused because I also see a lot of sites spelling it that way, even on Wikipedia.
Because we are dealing/quantizing with Colors I just thought that it could be Chloro. I could be wrong.
What do you think?
I read that it is Choropleth in http://mappingcenter.esri.com/index.cfm?fa=ask.answers&q=917
Choro is a greek word for place.