Building a choropleth of US States based on the following examples: https://gist.github.com/mbostock/4090848 https://bl.ocks.org/mbostock/4060606
Last active
August 8, 2017 22:03
-
-
Save chucklam/f628765b873d707a3d0e44ffc78deab8 to your computer and use it in GitHub Desktop.
US States Choropleth
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 | |
| height: 600 | |
| border: no |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <style> | |
| .counties { | |
| fill: none; | |
| } | |
| .states { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-linejoin: round; | |
| } | |
| </style> | |
| <svg width="960" height="600"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v2.min.js"></script> | |
| <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
| <script> | |
| // Datasets | |
| // FIP codes | |
| // https://www2.census.gov/geo/docs/reference/codes/files/national_county.txt | |
| // https://en.wikipedia.org/wiki/Federal_Information_Processing_Standard_state_code | |
| // | |
| // Unemployment rates | |
| // https://www.bls.gov/lau/#tables | |
| // https://bl.ocks.org/mbostock/4060606 | |
| var svg = d3.select("svg"), | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"); | |
| var path = d3.geoPath(); | |
| var unemployment = d3.map(); | |
| var x = d3.scaleLinear() | |
| .domain([1, 10]) | |
| .rangeRound([600, 860]); | |
| var color = d3.scaleThreshold() | |
| .domain(d3.range(2, 10)) | |
| .range(d3.schemeBlues[9]); | |
| // Create element for legend | |
| var g = svg.append("g") | |
| .attr("class", "key") | |
| .attr("transform", "translate(0,40)"); | |
| // Legend color scale | |
| g.selectAll("rect") | |
| .data(color.range().map(function(d) { | |
| d = color.invertExtent(d); | |
| if (d[0] == null) d[0] = x.domain()[0]; | |
| if (d[1] == null) d[1] = x.domain()[1]; | |
| return d; | |
| })) | |
| .enter().append("rect") | |
| .attr("height", 8) | |
| .attr("x", function(d) { return x(d[0]); }) | |
| .attr("width", function(d) { return x(d[1]) - x(d[0]); }) | |
| .attr("fill", function(d) { return color(d[0]); }); | |
| // Legend title - "Unemployment rate" | |
| g.append("text") | |
| .attr("class", "caption") | |
| .attr("x", x.range()[0]) | |
| .attr("y", -6) | |
| .attr("fill", "#000") | |
| .attr("text-anchor", "start") | |
| .attr("font-weight", "bold") | |
| .text("Unemployment rate"); | |
| // Legend markings - 2%, 3%, etc. | |
| g.call(d3.axisBottom(x) | |
| .tickSize(13) | |
| .tickFormat(function(x, i) { return i ? x : x + "%"; }) | |
| .tickValues(color.domain())) | |
| .select(".domain") | |
| .remove(); | |
| d3.queue() | |
| .defer(d3.json, "https://d3js.org/us-10m.v1.json") | |
| // .defer(d3.tsv, "unemployment.tsv", function(d) { unemployment.set(d.id, +d.rate); }) | |
| .defer(d3.tsv, "unemployment-states.tsv", function(d) { unemployment.set(d.id, +d.rate); }) | |
| .await(ready); | |
| function ready(error, us) { | |
| if (error) throw error; | |
| svg.append("g") | |
| .attr("class", "counties") | |
| .selectAll("path") | |
| // .data(topojson.feature(us, us.objects.counties).features) | |
| .data(topojson.feature(us, us.objects.states).features) | |
| .enter().append("path") | |
| .attr("fill", function(d) { | |
| // console.log(d); | |
| return color(d.rate = unemployment.get(d.id)); | |
| }) | |
| .attr("d", path) | |
| .append("title") // Tooltip | |
| .text(function(d) { return d.rate + "%"; }); | |
| svg.append("path") | |
| .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) | |
| .attr("class", "states") | |
| .attr("d", path); | |
| } | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| id | rate | |
|---|---|---|
| 02 | 5.1 | |
| 03 | 4.9 | |
| 04 | 8.6 | |
| 05 | 6.2 | |
| 06 | 5.1 | |
| 07 | 7.1 | |
| 08 | 6.7 | |
| 09 | 6.1 | |
| 10 | 3.0 | |
| 11 | 5.0 | |
| 12 | 5.2 | |
| 13 | 7.9 | |
| 14 | 9.1 | |
| 15 | 5.9 | |
| 16 | 5.5 | |
| 17 | 5.6 | |
| 18 | 6.5 | |
| 19 | 7.7 | |
| 20 | 5.7 | |
| 21 | 6.7 | |
| 22 | 2.7 | |
| 23 | 4.8 | |
| 24 | 5.6 | |
| 25 | 9.5 | |
| 26 | 3.7 | |
| 27 | 4.7 | |
| 28 | 6.3 | |
| 29 | 5.7 | |
| 30 | 6.6 | |
| 31 | 3.5 | |
| 32 | 5.4 | |
| 33 | 9.3 | |
| 34 | 7.6 | |
| 35 | 6.3 | |
| 36 | 5.6 | |
| 37 | 5.9 | |
| 38 | 2.5 | |
| 39 | 5.2 | |
| 40 | 6.0 | |
| 41 | 6.4 | |
| 42 | 4.9 | |
| 43 | 5.0 | |
| 44 | 9.3 | |
| 45 | 7.2 | |
| 46 | 8.9 | |
| 47 | 3.9 | |
| 48 | 6.1 | |
| 49 | 5.1 | |
| 50 | 6.5 | |
| 51 | 8.6 | |
| 52 | 5.6 | |
| 53 | 5.2 | |
| 54 | 5.2 | |
| 55 | 2.9 | |
| 56 | 4.9 | |
| 01 | 9.9 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment