| license: gpl-3.0 |
Unlike choropleth maps, cartograms encode data using area rather than color, resulting in distorted geographic boundaries. In this example, states are rescaled around their centroid, preserving local shape but not topology. Inspired by Zachary Johnson. Non-continguous cartogram design invented by Judy Olsen. U.S. state and county boundaries from the U.S. Census Bureau, simplified using GDAL and MapShaper.
forked from mbostock's block: Non-Contiguous Cartogram
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>Non-Contiguous Cartogram</title> | |
| <style> | |
| .land { | |
| fill: #fff; | |
| stroke: #ccc; | |
| } | |
| .state { | |
| fill: #ccc; | |
| stroke: #666; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| // PUT DATA BY STATE IN HERE | |
| const DATA = { | |
| AK: 0, | |
| AL: 3.1, | |
| AR: 2.7, | |
| AZ: 1.4, | |
| CA: 15.4, | |
| CO: 3.3, | |
| CT: 5.5, | |
| DC: 1.7, | |
| DE: 0.6, | |
| FL: 2.5, | |
| GA: 4.0, | |
| HI: 0, | |
| IA: 10.7, | |
| ID: 1.6, | |
| IL: 22.7, | |
| IN: 9.0, | |
| KS: 6.4, | |
| KY: 3.7, | |
| LA: 3.5, | |
| MA: 13.4, | |
| MD: 4.1, | |
| ME: 2.1, | |
| MI: 11.8, | |
| MN: 8.7, | |
| MO: 10.1, | |
| MS: 2.2, | |
| MT: 2.3, | |
| NE: 5.4, | |
| NC: 4.7, | |
| ND: 2.5, | |
| NH: 1.4, | |
| NJ: 12.0, | |
| NM: 0.9, | |
| NY: 37.8, | |
| NV: 0.0, | |
| OH: 19.1, | |
| OK: 4.0, | |
| OR: 3.5, | |
| PA: 29.6, | |
| SC: 2.5, | |
| SD: 3.0, | |
| RI: 2.0, | |
| TN: 4.4, | |
| TX: 10.1, | |
| VA: 5.0, | |
| VT: 0.9, | |
| UT: 1.6, | |
| WA: 5.2, | |
| WI: 8.1, | |
| WV: 4.8, | |
| WY: 1.0 | |
| } | |
| const countrySum = Object.keys(DATA) | |
| .reduce((acc, row) => acc + DATA[row], 0); | |
| const STATE_JSON_ORDER = ['', 'AL', 'AK', '', 'NM', 'AR', 'CA', '', 'CO', 'CT', 'DE', '', 'FL', 'GA', '', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', '', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', '', 'WA', 'WV', 'WI', 'WY']; | |
| var valueById = STATE_JSON_ORDER.map(d => DATA[d] / countrySum); | |
| var path = d3.geo.path(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", 960) | |
| .attr("height", 500); | |
| d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json", function(error, us) { | |
| if (error) throw error; | |
| svg.append("path") | |
| .datum(topojson.feature(us, us.objects.land)) | |
| .attr("class", "land") | |
| .attr("d", path); | |
| svg.selectAll(".state") | |
| .data(topojson.feature(us, us.objects.states).features) | |
| .enter().append("path") | |
| .attr("class", "state") | |
| .attr("d", path) | |
| .attr("transform", function(d) { | |
| var centroid = path.centroid(d), | |
| x = centroid[0], | |
| y = centroid[1]; | |
| return "translate(" + x + "," + y + ")" | |
| + "scale(" + Math.sqrt(valueById[d.id] * 10 || 0) + ")" | |
| + "translate(" + -x + "," + -y + ")"; | |
| }) | |
| .style("stroke-width", function(d) { | |
| return 1 / Math.sqrt(valueById[d.id] * 5 || 1); | |
| }); | |
| }); | |
| </script> |