Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 9, 2016 02:01
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mbostock/6320825 to your computer and use it in GitHub Desktop.
Save mbostock/6320825 to your computer and use it in GitHub Desktop.
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"
}
}
Display the source blob
Display the rendered blob
Raw
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