Skip to main content
SimilarExport ZIP
100%

A9 Choropleth Map D3

✓ Published3🌍 Public
Nnathanjmuljadi@gmail.com
Last edited Apr 13, 2025
Created on Apr 13, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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 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
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.
92% 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
92% 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
91% 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
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