Skip to main content
SimilarExport ZIP
100%

State Graph

✓ Published0🌍 Public
SSelena Ding
Last edited Dec 15, 2022
Created on Dec 14, 2022

This example displays a choropleth-style map of the United States, with each state rendered as a light gray polygon and white borders separating them. It loads the US TopoJSON data from `us-10m.v1.json` and uses `d3.geoPath` to project the state features. The code applies a scale transform to the SVG to adjust the map’s size and vertical position. The visualization uses D3 v4 and TopoJSON v2, with the map drawn as SVG paths.

AI-generated description
MIT Licensed

Similar vizzes

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
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
87% 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
87% match
Loading thumbnail…

usa map

This example displays a choropleth-style map of US states, with each state filled by a categorical color from `d3.scaleOrdinal` and `schemeCategory10`. It uses `d3.geoPath` with a `geoAlbersUsa` projection to render the SVG paths, and the state boundaries are loaded from a TopoJSON file via `us-atlas`. Hovering a state changes its fill to yellow, while a red stroke outlines all boundaries. The code processes the TopoJSON with `topojson.feature` and appends a `<title>` element for each state name.

SSai Hemanth Babu Sunkari
86% 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
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…

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
85% match
Loading thumbnail…

Choropleth Map

A choropleth map of United States states renders geographic boundaries as SVG paths, colored light blue with black outlines and a red hover state. The map uses the topojson library to convert US Atlas TopoJSON data into GeoJSON features, then projects them with d3.geoAlbersUsa and renders them via d3.geoPath. Interactive zooming is enabled through a d3.zoom event that applies transform updates to the map group, while a categorical color legend displays the domain. State data loads from a remote US Atlas JSON file.

NNicholas Papacostas
84% match