US Map With State Borders

100%

US Map With State Borders

✓ Published1🌍 Public

Last edited Oct 1, 2025

Created on Oct 1, 2025

This visualization displays a map of the United States with state borders and an outline of the country. It uses the `d3.geoPath` projection and renders geographic features as SVG paths, with a graticule outline drawn around the map. The map data is loaded from the `us-atlas` package as TopoJSON and converted using the `topojson-client` library. The states are filled in white with black borders, while the outer outline uses a thicker stroke to differentiate it from the internal boundaries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

US States Map

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.

CCurran Kelleher

88% match

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

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

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

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

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

85% match

Loading thumbnail…

Let's make a US map with D3.js!

This example renders a map of the United States using state boundaries. The map is drawn as black paths with white strokes on an SVG canvas. The code loads GeoJSON state outlines from the `us-atlas` package, converts them into topological features with the `topojson` library, and projects them using `d3.geoAlbers` with `d3.geoPath` for rendering. The visualization demonstrates a basic choropleth-ready framework without additional data encoding.

Ddaigokawabe

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

84% match