A9: D3 Choropleth Map

100%

A9: D3 Choropleth Map

✓ Published1🌍 Public

Last edited Apr 16, 2025

Created on Apr 15, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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 D3

This choropleth map visualizes U.S. county poverty rates for 2023, using a blue quantized color scale to encode the data and rendering SVG paths for each county with an Albers USA projection. It loads county boundary geometry from the us-atlas TopoJSON package and joins it to poverty CSV data keyed by FIPS code. Interactive tooltips appear on mouseover, displaying the county FIPS code and its poverty rate via d3’s event handling and DOM manipulation. The visualization uses d3.scaleQuantize and d3.geoPath for projection and drawing.

Nnathanjmuljadi@gmail.com

93% 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.

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

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

92% match