US States Map

100%

✓ Published2🌍 Public

Last edited Aug 18, 2024

Created on Aug 17, 2024

This example renders a geographic map of US states using D3 and TopoJSON, loading data from the us-atlas TopoJSON file. It draws each state with `d3.geoPath` and a `geoAlbersUsaTerritories` projection, which includes US territories. State boundaries appear as white strokes overlaid via a TopoJSON mesh, while the map updates reactively through the `d3-rosetta` StateProperty pattern. The visualization highlights the separation between states and provides a clean, basic template for choropleth or interaction extensions.

AI-generated description

A map that shows US states.

MIT Licensed

Similar vizzes

Loading thumbnail…

US Map

This example displays a map of the 50 US states, with each state filled in red and white borders separating them. The visualization uses the `geoAlbersUsaTerritories` projection and the `d3.geoPath` API to render geographic shapes as SVG paths. The map is generated from TopoJSON data loaded from a remote US atlas source, and it enhances interactivity by changing each state’s color to green when the pointer hovers over it.

Fferneyhoughedward@gmail.com

89% match

Loading thumbnail…

US State Map

This example displays a choropleth-style map of the United States, showing state boundaries as gray filled polygons with white strokes on a blank background. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to render the geographic shapes, while the TopoJSON `feature` API extracts state geometries from the `counties-10m.json` dataset hosted via jsdelivr. The map is drawn as SVG paths appended to a fixed 960×500 canvas, with styling applied through a CSS class.

AAkhila-Battula

89% match

Loading thumbnail…

state map

This example displays a map of US state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers USA projection to include US territories. The map renders state land areas in teal with lighter interior mesh lines separating adjacent states, drawn as SVG paths via `d3.geoPath`. React components manage the visualization, with `useData` fetching TopoJSON from the US Atlas repository and converting it to GeoJSON using `topojson.feature` and `topojson.mesh`. The code also defines a graticule with `d3.geoGraticule` for reference lines.

Bbhargavarathod

88% match

Loading thumbnail…

US State Map

This example displays a static map of US states, with each state rendered as a gray path using an SVG. The code loads state boundary data from a TopoJSON file and converts it into GeoJSON features using the `feature` function from topojson. It then projects the geographic coordinates to screen space with the `geoAlbersUsa` projection and `geoPath` generator from D3, appending the resulting paths to the SVG. No additional data or interactivity is applied.

Ddanrhymes

88% match

Loading thumbnail…

Country Map

This example shows a choropleth map of the United States, with each state rendered as a green SVG path on a light blue background. It loads US state boundaries from the us-atlas TopoJSON file and uses the `d3.geoPath` projection with `d3.geoAlbersUsa` to create the map. The code relies on `d3.json` to fetch the data and the `topojson-client` library to convert TopoJSON features into GeoJSON paths for rendering.

KKishen Patel

88% match

Loading thumbnail…

US Country Map

This example displays a static choropleth map of the United States, with all states uniformly filled in red on a light yellow background. Using D3 v4 and TopoJSON, it loads state boundaries from the `us-atlas` dataset and renders them as SVG paths with `d3.geoPath` and the `d3.geoAlbersUsa` projection, which automatically positions Alaska and Hawaii. The code applies stroke styling to delineate state borders, offering a simple baseline for geographic data visualization.

Aavinash021997

88% match

Loading thumbnail…

Country Map

This example displays a choropleth map of the 50 US states, rendered as SVG paths with a blue fill and black state borders. The visualization uses the `geoAlbersUsaTerritories()` projection and `d3.geoPath()` to draw geographic features, while `useData` fetches TopoJSON data from the `us-atlas` package. State boundaries are generated via the `feature()` and `mesh()` functions from TopoJSON, and hovering highlights a state blue.

Rrakeshkommineni

88% match

Loading thumbnail…

USA Map

This example displays a choropleth-style map of the 50 US states using the `geoAlbersUsaTerritories` projection from the `geo-albers-usa-territories` library. The visualization renders geographic data from `us-atlas@3.0.0` TopoJSON via `d3.geoPath` within a React component, using `feature()` and `mesh()` from `topojson` to generate land and interior boundaries. States are filled with a yellow color and outlined in black, while hovering on a state highlights it in green, as defined in the accompanying CSS. The map is drawn as SVG at 960×600 resolution, with a loading state displayed until data is fetched.

Aaashrithd4

88% match