The states in red all have a population less than Queens, New York (in blue).
For Rebecca Solnit
forked from mbostock's block: U.S. Counties TopoJSON
license: gpl-3.0 | |
height: 600 | |
border: no |
The states in red all have a population less than Queens, New York (in blue).
For Rebecca Solnit
forked from mbostock's block: U.S. Counties TopoJSON
<!DOCTYPE html> | |
<style> | |
.counties { | |
fill: none; | |
} | |
.county-highlight { | |
fill: blue; | |
} | |
.states { | |
fill: lightgray; | |
} | |
.states-lowpop { | |
fill: red; | |
} | |
.counties :hover { | |
fill: red; | |
} | |
.county-borders { | |
fill: none; | |
stroke: #fff; | |
stroke-width: 0.5px; | |
stroke-linejoin: round; | |
stroke-linecap: round; | |
pointer-events: none; | |
} | |
</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> | |
var svg = d3.select("svg"); | |
var path = d3.geoPath(); | |
d3.json("https://d3js.org/us-10m.v1.json", function(error, us) { | |
if (error) throw error; | |
svg.append("g") | |
.attr("class", "states") | |
.selectAll("path") | |
.data(topojson.feature(us, us.objects.states).features) | |
.enter().append("path") | |
.attr("d", path) | |
.classed("states-lowpop", function(d) { | |
return d.id == '02' // Alaska | |
|| d.id == '10' // Delaware | |
|| d.id == '15' // Hawaii | |
|| d.id == '16' // Idaho | |
|| d.id == '23' // Maine | |
|| d.id == '30' // Montana | |
|| d.id == '31' // Nebraska | |
|| d.id == '33' // New Hampshire | |
|| d.id == '35' // New Mexico | |
|| d.id == '38' // North Dakota | |
|| d.id == '44' // Rhode Island | |
|| d.id == '46' // South Dakota | |
|| d.id == '50' // Vermont | |
|| d.id == '54' // West Virginia | |
|| d.id == '56' // Wyoming | |
; | |
}); | |
svg.append("g") | |
.attr("class", "counties") | |
.selectAll("path") | |
.data(topojson.feature(us, us.objects.counties).features) | |
.enter().append("path") | |
.attr("d", path) | |
.classed('county-highlight', function(d) { | |
return d.id == '36081'; | |
}); | |
svg.append("path") | |
.attr("class", "county-borders") | |
.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))); | |
}); | |
</script> |