Skip to content

Instantly share code, notes, and snippets.

@mbostock
Forked from mbostock/.block
Last active January 31, 2020 08:18
Show Gist options
  • Save mbostock/4108203 to your computer and use it in GitHub Desktop.
Save mbostock/4108203 to your computer and use it in GitHub Desktop.
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

+1

@laveena-sachdeva
Copy link

@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