Skip to main content
SimilarExport ZIP
100%

Merging Counties III

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

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.

AI-generated description

Stress test for topojson.merge, new in TopoJSON 1.6.

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
88% 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
87% 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
82% 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
81% 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
80% 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
78% match
Loading thumbnail…

U.S. Counties TopoJSON

This map displays the boundaries of every county in the United States using data from a TopoJSON file fetched from `https://d3js.org/us-10m.v1.json`. It renders the county shapes as filled SVG paths, with a white mesh overlay showing county borders via `topojson.mesh`. Hovering over any county turns it red. The visualization is built with D3 v4, using `d3.geoPath` to project the geometry and `topojson.feature` to extract the features, relying on the `us-atlas` TopoJSON data source.

Mmbostock
78% match
Loading thumbnail…

Untitled

This example displays a map of New York counties using an Albers USA projection with D3 v3 and TopoJSON, showing county boundaries and state borders in white. Clicking a county triggers a smooth zoom animation that centers the view on that region, highlighting it in sky blue while scaling stroke widths inversely. The visualization uses `d3.geo.albersUsa`, `d3.geo.path`, and a 750-millisecond transition with the `scale` and `translate` transforms, with data loaded from a GitHub-hosted TopoJSON file.

Llupica.matthew@gmail.com
78% match