U.S. TopoJSON

100%

✓ Published0🌍 Public

Last edited Mar 1, 2019

Created on Nov 18, 2012

This example displays a layered map of the United States using county, state, and national boundaries. The map is rendered as SVG, with counties stroked in thin gray, states in thin black, and the nation in a thicker black outline. It loads TopoJSON data from the us-atlas package and uses the topojson-client library to compute and draw the geographic meshes and features. The visualization is built with d3.v4, using d3.json for data fetching and d3.geoPath for path generation.

AI-generated description

These county, state and country boundaries are extracted from a single TopoJSON file from us-atlas. Counties are stroked in thin gray, states in thin black, and the country in thick black. See also the fancy drop shadow variant.

gpl-3.0 Licensed

Similar vizzes

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

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

91% match

Loading thumbnail…

U.S. TopoJSON

This visualization displays U.S. state and county boundaries extracted from a TopoJSON file served from d3js.org. A blurred, semi-transparent silhouette of the nation appears behind a solid white version, creating a subtle depth effect. The code uses d3.geoPath to render the features, while topojson.feature and topojson.mesh convert the TopoJSON data into GeoJSON paths for drawing.

Mmbostock

90% match

Loading thumbnail…

U.S. Land TopoJSON

This example displays the outline of the United States as a single dark shape using the TopoJSON `us-10m.v1.json` dataset. The geographic path is rendered from the `nation` object via `topojson.feature`. The map is drawn with D3 v4’s `d3.geoPath` into an SVG, showing the national boundary at a fixed 960×600 viewport. It relies on the topojson client library to decode the compressed geometry for rendering.

Mmbostock

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

87% match

Loading thumbnail…

USTopoJSON

This example displays a map of all U.S. counties as thin black outlines, drawn with SVG paths using the `d3.geo.path()` projection. The map is built from a TopoJSON file fetched from a gist, which contains the county geometries. When a user hovers over a county, the CSS `path:hover` rule turns it red, providing a simple interactive highlight. The code relies on D3 v3 and the `topojson.v1` library to process and render the topology data.

JJn1532

87% match

Loading thumbnail…

USA Map with TOPO JSON Data

This example presents a stylized map of the United States, displaying state boundaries and land masses with distinct colors for spheres and geographic regions. The visualization renders as an SVG and uses React to manage the component lifecycle. It loads geographic data from the US Atlas TopoJSON, converting it with `topojson.feature` and `topojson.mesh`, then projects it using `d3.geoAlbers` and `d3.geoPath`. Graticules are included via `d3.geoGraticule`, though not explicitly drawn in the component.

Ggopiganta

87% match

Loading thumbnail…

U.S. States TopoJSON small multiples

This example shows a small multiple of the United States, displaying 81 separate SVG maps, each with the nation’s landmass, county boundaries, and state borders drawn in a dark theme. The visualization uses TopoJSON to parse a US Census Bureau shapefile, with `d3.geo.albersUsa` projecting the geographic data onto a 96-by-50-pixel canvas. Each map is rendered by iterating over the topojson features and meshes, applying the same projection and path-generation logic to create a grid of repeated state outlines.

PPhilippe Rivière

86% match