Skip to main content
SimilarExport ZIP
100%

Merging States

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Jul 15, 2014

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.

AI-generated description

Using topojson.merge to merge states & provinces into a single feature from the Natural Earth 1:10,000,000 Admin 1 dataset.

The orange arc is an artifact of the merge that might either be a bug in the merge algorithm or in the dataset (or both).

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
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 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
83% 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
83% 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
77% match
Loading thumbnail…

U.S. States TopoJSON

This example shows a map of the United States rendered as SVG paths, where individual states turn red when hovered. The map uses the TopoJSON `us-atlas` file, loaded via `d3.json`, and the code relies on the `topojson` library to convert the TopoJSON topology into geographic features. The rendering is done with `d3.geoPath` to project the geometry, and state borders are drawn as a separate path using a mesh that highlights each boundary. No interaction beyond the hover effect is implemented.

Mmbostock
74% match
Loading thumbnail…

So... here is the Earth

A map of the United States highlights a specific set of states in red, using a natural Earth projection to render the country’s shape. The visualization loads US state boundaries from a TopoJSON atlas and uses d3.geoPath with d3.geoNaturalEarth1 to draw the paths. Selected states are merged via topojson.merge and filled with a distinct color, while d3.zoom is also loaded but not applied in the final code.

Jjons288
73% match
Loading thumbnail…

U.S. State Mesh

This example visualizes the starting point of every arc in a TopoJSON file of U.S. state boundaries, rendered as a black dot on a mesh of state outlines. It loads the topology from `us.json` and uses `d3.geo.path()` with a `null` projection to draw the mesh. The code then plots each arc's start coordinate as a small circle, applying a custom `transform` function to map the TopoJSON coordinates using the file's `transform.scale` and `transform.translate` values. The visualization highlights how polygon boundaries are decomposed into shared arcs, revealing the topology's underlying structure.

Mmbostock
73% match