U.S. Land TopoJSON

100%

U.S. Land TopoJSON

✓ Published0🌍 Public

Last edited Jan 24, 2017

Created on Nov 23, 2012

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.

AI-generated description

This map demonstrates the TopoJSON us-atlas. The same TopoJSON file can also be used to show counties and states.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

U.S. TopoJSON

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.

Mmbostock

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

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

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

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

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

82% match

Loading thumbnail…

USA Country Map with Topojson data

This example displays a choropleth-style map of the United States, with each state rendered as a separate SVG path using a topojson dataset. It shows state boundaries and names via tooltips. The code uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to generate the paths, while `topojson.feature` converts the TopoJSON topology into GeoJSON features. The map is drawn with SVG elements, and the data is loaded asynchronously from a GitHub gist using D3’s `json` method.

NNaveenrajaYalagandula

82% match

Loading thumbnail…

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

80% match