Skip to main content
SimilarExport ZIP
100%

A9 US Choropleth Map

✓ Published2🌍 Public
Hhxu51@usfca.edu
Last edited Apr 16, 2025
Created on Apr 16, 2025

This example shows a choropleth map of U.S. state poverty rates using 2023 data from Poverty2023.csv. The map colors each state with a sequential red scale based on the percentage of the population living below the poverty line, with missing data rendered in gray. Hovering over a state displays a tooltip with the state name and its poverty rate. The visualization uses D3 v7’s `d3.geoPath` with the `geoAlbersUsa` projection to render state boundaries from TopoJSON, and `d3.scaleSequential` with `d3.interpolateReds` for color encoding.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth map in D3

This choropleth map visualizes 2021 poverty estimates for U.S. states, with each state colored according to its poverty rate using a quantized blue color scale. The visualization loads geographic boundaries from a TopoJSON file and joins them with CSV data containing state-level poverty percentages. Built with D3 v7, the example uses `d3.geoPath` with the `geoAlbersUsa` projection to render the map as SVG paths, while a legendQuant scale displays the color-to-value mapping. The code also implements mouseover interactions that highlight states and tooltip text showing the poverty rate for each region.

EEunice Tu
92% match
Loading thumbnail…

Choropleth map

A choropleth map of the United States displays the percentage of the population living in poverty for each county in 2021. The map uses a sequential red color scale, from light to deep red, to encode the poverty rate, with a legend showing values from 0% to 25% in five-point increments. The visualization is rendered as an SVG using D3.js v7, where the `d3.geoAlbersUsa()` projection and `d3.geoPath()` draw the county boundaries from a GeoJSON file. The poverty data is loaded from a CSV file and joined to the geographic features via their FIPS code.

KKwasi Acquaye
91% match
Loading thumbnail…

A9 - Choropleth map

This choropleth map visualizes poverty estimates across US counties in 2021, using a red sequential color scale to encode rates. The map renders county boundaries as SVG paths via `d3.geoPath` and TopoJSON, with white state borders overlaid for context. Hovering over a county triggers a CSS tooltip displaying the area name, state, and poverty value, while the county highlights in steel blue through a class toggle. A legend with an `axisBottom` scale maps thresholds from 0 to 50 percent, and data loads from an external CSV with `d3.csv`.

DDuc Pham
91% match
Loading thumbnail…

A9 - Choropleth Map in D3

This choropleth map shows 2021 poverty rates by US county, using a red sequential color scale to encode percentages from 0 to over 40. The visualization renders US counties as SVG paths via `d3.geoPath` and `topojson`, with state boundaries overlaid. County data comes from a USDA CSV, joined by FIPS ID, while map topology uses the `us-10m.v1` TopoJSON file. A threshold-based legend with an axis label communicates the rate categories. County-level tooltips appear on hover, though the code also appends native SVG `<title>` elements for basic interactivity.

RRiya Mathur
90% match
Loading thumbnail…

A9 Choropleth Map in D3

This example displays a choropleth map of poverty rates across U.S. counties, using a sequential blue color scale to encode percentages from 0 to 100. It loads county boundaries from the TopoJSON `us-10m.v1.json` dataset and merges them with CSV data containing poverty estimates. The map is rendered as SVG paths via `d3.geoPath` with an AlbersUSA projection fit to the viewport, while `d3.scaleSequential` with `d3.interpolateBlues` determines each county’s fill color.

EEric Yao
90% match
Loading thumbnail…

A9: D3 Choropleth Map

This choropleth map visualizes county-level poverty population data for 2023 across the United States. It uses a quantile color scale with six classes from light pink to dark red to show the distribution of poverty counts. Built with D3.js and TopoJSON, the map renders county boundaries as SVG paths using `d3.geoPath`, and includes interactive tooltips that display county names and data values on hover. The data is loaded from a local CSV file and joined to geographic features by FIPS codes.

Rronnieferrufino4908@gmail.com
89% match
Loading thumbnail…

A9 Choropleth Map in D3

This choropleth map visualizes poverty rates across U.S. counties, using a blue sequential color scale to encode the percentage of residents in poverty for 2021. County boundaries are rendered as SVG paths via `d3.geoPath()` from TopoJSON data, while color values are mapped from a CSV dataset joined by FIPS codes. The map includes a hover tooltip via SVG `<title>` elements, and missing data appears gray. It uses D3 v7, TopoJSON, and d3-legend for potential legend support.

EEric Yao
89% match
Loading thumbnail…

A9 - Choropleth

This choropleth maps 2021 poverty rates by U.S. county, coloring each county on a blue sequential scale where rates are multiplied by five for stronger visual contrast. The visualization loads county and state geometries from the us-atlas TopoJSON file, then joins them with USDA Economic Research Service poverty estimates via FIPS codes. It renders using d3.geoPath inside an SVG, with state boundaries drawn as white meshes and county tooltips showing the county name, state, and exact poverty percentage. The code uses d3.json and d3.csv for data loading, along with d3.scaleSequential and d3.interpolateBlues for color encoding.

AAndrew Blakeslee Moore
89% match