Skip to content

Instantly share code, notes, and snippets.

@mbostock
Forked from mbostock/.block
Last active Jan 31, 2020
Embed
What would you like to do?
U.S. TopoJSON
license: gpl-3.0
height: 600
border: no
redirect: https://observablehq.com/@d3/u-s-map

These county, state and country boundaries are extracted from a single TopoJSON file from us-atlas. Counties are stroked in thin gray, states in thin black, and the country in thick black. See also the fancy drop shadow variant.

<!DOCTYPE html>
<svg width="960" height="600" fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>
var svg = d3.select("svg");
var path = d3.geoPath();
d3.json("https://unpkg.com/us-atlas@1/us/10m.json", function(error, us) {
if (error) throw error;
svg.append("path")
.attr("stroke", "#aaa")
.attr("stroke-width", 0.5)
.attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0); })));
svg.append("path")
.attr("stroke-width", 0.5)
.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
svg.append("path")
.attr("d", path(topojson.feature(us, us.objects.nation)));
});
</script>
@alatzl
Copy link

alatzl commented Aug 11, 2015

All your examples involving US maps use the same /mbostock/raw/4090846/us.json file for the state boundary and mapping data, it looks like. Have you documented anywhere how you generated that json? I'm struggling to achieve the same result when using ogr2ogr and topojson to convert a .shp file to json structured similarly to yours.

@josephmisiti
Copy link

josephmisiti commented Dec 9, 2015

+1

@laveena-sachdeva
Copy link

laveena-sachdeva commented Apr 3, 2019

@alatzal .. I think you can find it here: https://gist.githubusercontent.com/mbostock/4090846/raw/us.json

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment