U.S. States TopoJSON

100%

U.S. States TopoJSON

✓ Published0🌍 Public

Last edited Dec 16, 2019

Created on Nov 16, 2012

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.

AI-generated description

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

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

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

87% match

Loading thumbnail…

us test

This example displays a map of the United States with its states rendered as blue, interactive SVG paths that turn darker on hover. A graticule grid and a gray sphere outline provide geographic context, and the map supports pan and zoom via d3.zoom. The visualization uses d3.geoPath with a null projection to draw raw coordinates from TopoJSON data loaded from the us-atlas package, processed through topojson.feature. Styles are defined in CSS, and the code imports the d3 and topojson libraries.

GGlebenator

87% match

Loading thumbnail…

Untitled

This example displays a map of the United States with individual state boundaries rendered as SVG paths. The visualization uses TopoJSON data from the us-10m dataset, with states drawn via d3.geoPath and state borders emphasized with a white stroke. The code employs the D3 v4 library and topojson.feature to extract state geometries, while a CSS hover effect turns states red for interactive feedback. The rendering is purely SVG-based within a React framework.

MManh Pham

86% match

Loading thumbnail…

Untitled

This example displays a choropleth-style map of the United States using SVG paths. It renders state boundaries and fills each state as a separate path, with a hover effect that turns states red via CSS. The visualization loads TopoJSON data from a remote URL and converts it to GeoJSON using the `topojson.feature` and `topojson.mesh` APIs. It relies on `d3.geoPath` to project and draw the geographic shapes, while `d3.json` fetches the data asynchronously. State borders are drawn as a white stroke overlay for visual separation.

MMina Rezaei

86% match

Loading thumbnail…

experiment Map

This example displays a map of the United States rendered as SVG paths, with state boundaries drawn from TopoJSON data loaded from the us-atlas dataset. It uses D3 v5’s `json`, `geoPath`, and `geoMercator` functions along with the `feature` method from topojson to convert the TopoJSON topology into GeoJSON features. The visualization demonstrates basic geographic projection and path generation, outputting a static map without additional interactivity or styling.

SSaurabh Gupta

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

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

85% match