This map demonstrates the TopoJSON us-atlas. The same TopoJSON file can also be used to show states.
forked from mbostock's block: U.S. Counties TopoJSON
license: gpl-3.0 | |
height: 600 | |
border: no |
<!DOCTYPE html> | |
<style> | |
.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; | |
var set1 = d3.set([ | |
48111, 48421, 48195, 48357, 48295, 48205, 48341, 48233, 48393, 48211, | |
48359, 48375, 48065, 48179, 48483, 48485, 48077, 48337, 48237, 48009, | |
48503, 48023, 48269, 48125, 48107, 48303, 48219, 48079, 48501, 48445, | |
48117, 48381, 48011, 48129, 48087, 48369, 48069, 48437, 48045, 48191, | |
48075, 48017, 48279, 48189, 48153, 48345, 48101, 48155, 48197, 48487, | |
48305, 48169 | |
]); | |
var region1 = {type: "FeatureCollection", name: "myRegion", features: topojson.feature(us, us.objects.counties).features.filter(function(d) {return set1.has(d.id); })}; | |
console.log(region1) | |
svg.append("g") | |
.attr("class", "counties") | |
.selectAll("path") | |
.data(topojson.feature(us, us.objects.counties).features) | |
.enter().append("path") | |
.attr("d", path); | |
svg.append("path") | |
.attr("class", "county-borders") | |
.attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b; }))); | |
}); | |
</script> |