Merging States

100%

Merging States

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jul 1, 2023

A choropleth of U.S. states highlights a selected subset in orange while the remaining states appear gray with white interior boundaries. The example demonstrates `topojson.merge`, which combines multiple polygon geometries into one unified path, removing shared borders between selected states. It uses D3 v3 with `d3.geo.albersUsa` projection, `d3.geo.path` for rendering, and TopoJSON to load the U.S. state data. The selected states are chosen by a hardcoded set of state IDs, and the merged result is drawn as a single SVG path.

AI-generated description

This demonstrates using topojson.merge, a new feature in TopoJSON 1.6, to merge multiple polygons into a single polygon whilst removing interior borders. (An alternative approach is to draw the polygons twice.)

This example is in response to a Stack Overflow question.

gpl-3.0 Licensed

Similar vizzes

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

93% 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

89% match

Loading thumbnail…

Merging TopoJSON states

This example demonstrates merging multiple polygons into a single polygon using topojson.merge, a feature introduced in TopoJSON 1.6. It displays a pre-projected map of the USA and Canada, highlighting a selected set of states (AK, YT, BC, WA, OR, CA) in orange by merging their geometries into one continuous shape, which removes interior borders between the selected regions. The map also shows all states in gray with white boundary lines drawn via topojson.mesh. Unlike mbostock's original approach of drawing polygons twice, this uses a null projection since the TopoJSON file is already projected, simplifying the code. The selection is hard-coded as a d3.set of state/province IDs, and the merged geometry is rendered as a single SVG path using topojson.merge. This technique is useful for highlighting multi-part regions while preserving a clean, borderless outline.

AAlan McConchie

89% match

Loading thumbnail…

Merging Counties

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.

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

85% match

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

85% match

Loading thumbnail…

Let's make a map with D3.js!

This visualization displays U.S. states as a choropleth map, highlighting a subset of selected state IDs in orange while rendering all others in gray. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw SVG paths from TopoJSON data loaded from `us-10m.v1.json`. The code filters state features against a predefined set and applies the `.selected` CSS class, though the commented-out section means the highlighting is not rendered in the final output.

Jjons288

82% 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

80% match