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

100%

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

✓ Published1🌍 Public

Last edited Aug 10, 2020

Created on Aug 8, 2020

Forked from Let's make a 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make the US Map with D3.js!

This example displays a choropleth-style map of the United States with state boundaries rendered as SVG paths. It uses D3.js v5 to load US Atlas TopoJSON data, converts it to GeoJSON with the topojson library’s `feature` function, and projects it using `d3.geoAlbersUsa`. The `geoPath` generator draws each state as a separate path with a light green fill and subtle black strokes. A light blue sphere background is added first to contrast with the landmasses. The visualization intentionally omits labels or interactive features, focusing strictly on the geographic outlines.

Aacrasto-tibco

93% match

Loading thumbnail…

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

This example demonstrates how to create a map of the United States using D3.js, rendering each state as a green SVG path with black strokes. The code loads county-level TopoJSON data from the us-atlas package, extracts state boundaries with topojson.feature, and projects them using the d3.geoAlbersUsa() projection. State paths are generated with d3.geoPath and appended to an SVG element, with styles defined in an accompanying CSS file. The example uses D3 v5 and relies on the geo-albers-usa-territories plugin for the projection.

NNita

93% match

Loading thumbnail…

Let's make an interactive US Map with D3.js!

This interactive US map uses d3.geoAlbersUsa and d3.geoPath to render state boundaries from TopoJSON data, with each state displaying its name via SVG title elements. The visualization supports zooming and panning through d3.zoom, applying transforms to the SVG group containing the state paths. States are colored light green and highlight on hover, while the surrounding ocean appears as a light blue sphere backdrop. The map loads geographic data from a CDN-hosted US atlas file and renders everything client-side using D3 v5.

KKaitlyn Trudeau

89% match

Loading thumbnail…

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

This example renders a choropleth-style map of all US counties as light green SVG paths with subtle black borders. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` generator to convert TopoJSON county boundaries from the `us-atlas` dataset into scalable vector graphics. The code loads the TopoJSON via `d3.json`, extracts features with `topojson.feature`, and binds them to SVG path elements, while styling is handled with CSS class selectors.

NNita

89% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple interactive map of the United States, with each state rendered as a light green shape that turns red on hover. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw the geography, while TopoJSON’s `feature` extracts state boundaries from the us-atlas counties-10m dataset. The SVG paths are selected and appended via `selectAll` and `data`, with styling handled in CSS. The map is static apart from the hover effect, with no zoom or pan interactions.

Mmikezy

89% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a choropleth-style map of the United States using D3.js, highlighting a subset of states with a distinct CSS class. It loads TopoJSON data from `https://d3js.org/us-10m.v1.json` and uses `d3.geoAlbersUsa` for projection and `d3.geoPath` to render state boundaries as SVG paths. The code filters state features against a predefined set of FIPS IDs, though the visual highlighting of selected states is commented out.

Jjons288

88% match

Loading thumbnail…

Let's make a map with D3.js!

This example creates a tilegram map of the United States using D3.js and the TopoJSON library. It loads geographic data from `tile.topo.json` and renders each state as a path generator using `d3.geoPath` with a custom `geoTransform` projection. The SVG canvas is 1400 by 1000 pixels, and states are styled with their names and tilegram values from the data. The visualization demonstrates how to combine TopoJSON feature extraction with D3's geographic path rendering to produce a stylized map.

Aanduskong

87% match

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

87% match