TopoJSON extends GeoJSON for geographic data by storing shared line segments as reusable arcs instead of repeating each feature’s coordinates. This removes redundant borders, produces smaller web-ready files, and supports detailed maps. Unlike GeoJSON, TopoJSON is not directly readable by D3; decode it with topojson-client before drawing. section 13.1.2 section 13.7
Use TopoJSON in a D3 mapping workflow:
- Install and import topojson-client with npm. section 13.5
- Convert a topology object into GeoJSON features with topojson.feature(topology, topology.objects.<name>). section 13.5
- Extract shared borders separately with topojson.mesh() when they should be rendered as one geometry. section 13.5
- Render the converted features through a D3 projection and geo path generator, then append the resulting paths to SVG. section 13.5
Mapping France’s departments
A France map converts france.objects.FRA_adm2 into department features, extracts its borders with mesh(), and draws both through a Mercator projection. Rendering the borders as one additional path avoids overlap and creates a cleaner map. The result displays France’s 96 departments and can be combined with city locations for a Nobel laureate birthplace visualization. section 13.5
Figure 13.3 While shared borders appear twice in GeoJSON, TopoJSON reduces redundancy by merging them into a single arc.
Compare duplicated GeoJSON borders with TopoJSON’s single shared arc. section 13.1.2
