Merging Counties II

100%

Merging Counties II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Mar 30, 2014

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

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

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

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

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…

US Counties

This map of US counties displays all county boundaries with a subtle drop-shadow effect. The code uses D3 v4’s `d3.geoAlbersUsa` projection and `d3.geoPath` to render geographic features. It loads TopoJSON from a local `counties.json` file and converts it to GeoJSON via `topojson.feature` and `topojson.mesh`. The visualization plots state borders as a separate mesh, overlays white and blurred nation outlines for depth, and draws each county as an outlined SVG path with thin gray strokes.

MMTClass

82% match

Loading thumbnail…

Simple US County Map

This example displays a map of US counties rendered as a collection of white-stroked polygons. It fetches TopoJSON data from the us-atlas CDN, converts it to GeoJSON using `topojson-client`’s `feature` function, and projects it with `geoAlbersUsaTerritories` from the `geo-albers-usa-territories` library. The map is drawn using `d3.geoPath` within a dynamic SVG container that resizes to the window, with state management driving the asynchronous data loading.

CCurran Kelleher

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

80% match