Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Feb 9, 2016
Embed
What would you like to do?
Population Choropleth
license: gpl-3.0

Note: the counties aren’t clipped to water boundaries, so they look a bit weird and the corresponding density calculation is inaccurate. So don’t copy this example without fixing those problems first, ok? See the us-atlas project for a more comprehensive Makefile of examples, and the projected choropleth example for a better style. Also, you’ll want to add a legend for the color scale.

To build this example, git clone this repo, npm install, and then make.

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var color = d3.scale.log()
.range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"])
.interpolate(d3.interpolateHcl);
var path = d3.geo.path()
.projection(null);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("us-albers.json", function(error, us) {
if (error) throw error;
var counties = topojson.feature(us, us.objects.counties).features;
var densities = counties
.map(function(d) { return d.properties.density = d.properties.pop / path.area(d); })
.sort(function(a, b) { return a - b; });
color.domain([d3.quantile(densities, .01), d3.quantile(densities, .99)]);
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(counties)
.enter().append("path")
.style("fill", function(d) { return color(d.properties.density); })
.attr("d", path);
});
</script>
all: \
us-albers.json
clean:
rm -rf -- County_2010Census_DP1.*
County_2010Census_DP1.zip:
curl -o $@ --raw 'http://www2.census.gov/geo/tiger/TIGER2010DP1/County_2010Census_DP1.zip'
County_2010Census_DP1.shp: County_2010Census_DP1.zip
rm -rf $(basename $@)
mkdir -p $(basename $@)
unzip -d $(basename $@) $<
for file in $(basename $@)/*; do chmod 644 $$file; mv $$file $(basename $@).$${file##*.}; done
rmdir $(basename $@)
touch $@
# projected (giving node extra memory since input shapefile is big)
us-albers.json: County_2010Census_DP1.shp
node --max_old_space_size=8192 node_modules/.bin/topojson \
-q 1e5 \
-s 1 \
--projection 'd3.geo.albersUsa()' \
--id-property=GEOID10 \
-p name=NAMELSAD10,pop=+DP0010001 \
-o $@ \
-- counties=County_2010Census_DP1.shp
# non-projected (not used by this example, but included for reference)
us.json: County_2010Census_DP1.shp
node_modules/.bin/topojson \
-q 1e5 \
-s 7e-7 \
--id-property=GEOID10 \
-p name=NAMELSAD10,pop=+DP0010001 \
-o $@ \
-- counties=County_2010Census_DP1.shp
{
"name": "anonymous",
"version": "0.0.1",
"private": true,
"devDependencies": {
"topojson": "1"
}
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment