Skip to main content
SimilarExport ZIP
100%

Merging Counties

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Mar 30, 2014

This example demonstrates merging county boundaries into state boundaries using the TopoJSON 1.6 merge functionality. It visualizes the United States by first displaying a static land mass, then animating the sequential drawing of each state’s borders derived from its constituent counties. The animation uses SVG paths with stroke-dasharray transitions, progressively revealing each state’s outline before fading it out. The code employs `d3.geo.path`, `d3.geo.albersUsa`, `topojson.merge`, and `topojson.mesh` to compute and render the geographic features.

AI-generated description

A test for the new topojson.merge functionality available in TopoJSON 1.6. The state boundaries are computed solely by merging county boundaries!

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Merging Counties II

This example displays a single gray landmass of the United States by merging all county geometries into one unified shape. The visualization uses TopoJSON and D3’s `d3.geo.albersUsa` projection with `d3.geo.path` to render the merged polygon. The code loads county data from a remote `us.json` file and applies `topojson.merge` to combine the geometries before drawing the SVG path. The result is a simplified state boundary map without individual county outlines.

Mmbostock
92% match
Loading thumbnail…

Merging States

This example demonstrates merging multiple US state polygons into a single shape while removing interior borders, using `topojson.merge` on a filtered set of state geometries. A static map renders all states in gray with white boundary strokes via `d3.geo.path` and an AlbersUSA projection, while selected states appear filled in orange with a black outline. It uses D3 v3 and TopoJSON v1, loading geographic data from a local `us.json` file, and highlights the merged path by filtering geometries against a predefined set of state IDs.

Mmbostock
88% match
Loading thumbnail…

Merging Counties III

This stress test visualizes a random subset of US counties, merged and colored via TopoJSON’s `topojson.merge` API. It shows a constantly cycling animation where new merged polygon groups fade in, highlight with distinct category colors, and fade out. The example uses D3.v3, `d3.select`, `d3.json`, and an AlbersUSA projection to render SVG paths. The underlying data source is a raw JSON file of US geometries from a gist.

Mmbostock
87% match
Loading thumbnail…

Merging States II

A variation on merging polygons, this example displays a map of the United States where a selected set of states is highlighted in orange. The visualization uses a careful rendering technique rather than topological manipulation to draw the highlighted states, layering a boundary path over the state fill. It employs D3 v3's `d3.geo` and `d3.json` to load US state geometries, along with the TopoJSON library to compute state boundaries and meshes. The rendering is dynamic, with the selected states' boundaries outlined in black to clearly distinguish the merged region.

Mmbostock
86% match
Loading thumbnail…

Merging States

A world map rendered in dark gray with white mesh borders around individual states merges all country subdivisions into a single landmass feature via `topojson.merge`, producing one orange-outlined polygon. The code builds this from Natural Earth Admin 1 data, using `d3.geo.mercator`, `d3.geo.path`, and `d3.geo.graticule` to draw graticule lines. An orange arc artifact is noted as a possible merge or dataset bug.

Mmbostock
83% match
Loading thumbnail…

Stitching States from Counties

This example demonstrates how to stitch together individual county boundaries into state outlines. It converts a TopoJSON file of US counties into a state-level map by identifying arcs that are shared only within a single state and merging them into continuous paths. The code uses D3.js to load and process the topology, tracks arc membership per state, and reconstructs polygons by connecting fragment chains. The resulting map is rendered using the standard D3 `geoPath` projection.

Mmbostock
81% match
Loading thumbnail…

U.S. TopoJSON

This visualization displays U.S. state and county boundaries extracted from a TopoJSON file served from d3js.org. A blurred, semi-transparent silhouette of the nation appears behind a solid white version, creating a subtle depth effect. The code uses d3.geoPath to render the features, while topojson.feature and topojson.mesh convert the TopoJSON data into GeoJSON paths for drawing.

Mmbostock
81% match
Loading thumbnail…

U.S. Counties TopoJSON Mesh

This example renders a minimalist map of U.S. counties using a TopoJSON mesh from the U.S. Census Bureau’s shapefile, served via the `us-10m.v1.json` file. The SVG visualization displays county boundaries as thin black lines with rounded joins, and overlays small circles at each arc’s starting point, revealing the topological structure of the data. The code uses `d3.geoPath` to project the mesh and `topojson.mesh` to extract boundaries, while `topojson.transform` positions the circles. Rendering is entirely SVG-based with D3 v4, and the map uses no fill, focusing purely on geometric outlines.

Mmbostock
81% match