Skip to main content
SimilarExport ZIP
100%

A9 - Choropleth Map in D3

✓ Published0🌍 Public
RRiya Mathur
Last edited Apr 1, 2024
Created on Apr 1, 2024
Forked from HTML Starter

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.

AI-generated description

Choropleth Map depicting the poverty rates in the United States in 2021 by county.

Data derived from: https://www.ers.usda.gov/data-products/county-level-data-sets/county-level-data-sets-download-data/

References: https://d3-graph-gallery.com/graph/choropleth_basic.html https://observablehq.com/@d3/choropleth

MIT Licensed

Similar vizzes

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

A9 Choropleth

This choropleth visualizes U.S. county-level poverty rates for 2021, with each county colored along a threshold scale of green shades; hovering reveals a tooltip with the county name and its exact percentage. The map is rendered as SVG using D3 v7’s `d3.geoPath` and TopoJSON `topojson.feature` to draw county boundaries, while a separate mesh path outlines counties lacking data. Poverty data is loaded from a CSV via `d3.csv`, and the color legend is generated with the d3-legend library. The visualization also includes a title and uses a linear scale to position the legend.

NNoah C.
94% 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
94% 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
93% match
Loading thumbnail…

A9-Chloropleth

This choropleth maps poverty rates across U.S. counties using a red sequential color scale, with tooltips displaying the county name and exact poverty value on hover. The visualization employs d3.csv to load poverty data keyed by FIPS codes, d3.json to fetch TopoJSON boundaries, and d3.geoPath to render county shapes as SVG paths. A d3.scaleThreshold with seven bins assigns colors from d3.schemeReds, while mouse events drive a custom tooltip appended to the page. The code also uses d3-legend implicitly via script inclusion, though no legend is explicitly drawn.

Jjrcuster@dons.usfca.edu
93% 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
92% match
Loading thumbnail…

A9- World Chloropleth

This choropleth visualizes poverty rates across U.S. counties using a threshold color scale with seven shades of red. It renders county boundaries as SVG paths via `d3.geoPath` and topojson, with each county filled according to its poverty value from a CSV dataset. Interactive tooltips display the county name and poverty figure on mouseover, powered by D3 event handlers. The visualization relies on d3.v6, topojson.v2, and d3-legend.

Jjrcuster@dons.usfca.edu
92% match