Stitching States from Counties

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.

81% match

Gist 11520211

This example visualizes the geographic boundaries of US states and counties using a TopoJSON file that encodes land, county, and state outlines. Built with D3, it renders the map from the `us.json` TopoJSON data, which contains geometry collections for counties and states. The visualization likely uses D3's projection and path generators to draw the geographic shapes, displaying the boundaries with distinct styling for counties and states. The minimal code structure suggests a basic interactive or static map, with the data provided in a structured TopoJSON format.

CCaged

78% match

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.

77% match

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.

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.

TopoJSON via MapBox & Leaflet

This example shows a map of the United States with county boundaries rendered as vector shapes, overlaid on a zoomable and pannable MapBox tile layer. It combines D3.js and TopoJSON to load and parse county geometries from a remote GeoJSON-like file, then uses MapBox’s Leaflet-based `L.geoJson` to display them with a simple gray outline style. The map initializes at a low zoom level, and the counties are added as a single layer after asynchronous JSON retrieval, demonstrating integration between D3’s data handling and Leaflet’s mapping API.

CCaged

County Topology

This graph shows the topology of U.S. counties as a network, where each node sits at a county centroid and links connect neighboring counties that share borders. The visualization uses simplified geometry from a TopoJSON file, rendering the nation and county boundaries as SVG paths via `d3.geoPath`. Node positions come from path centroids, while neighbor relationships derive from `topojson.neighbors` on the county geometries. Edges are drawn as straight lines between connected centroids, overlaid on the map to reveal adjacency patterns across the country.

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.