A9 Choropleth Map

100%

A9 Choropleth Map

✓ Published0🌍 Public

Last edited Apr 1, 2024

Created on Mar 31, 2024

This choropleth map visualizes state-level unemployment rates in the United States for 2021, using a blue sequential color scale to encode rate differences. Built with D3 v7, it renders the contiguous states and Alaska via `d3.geoAlbersUsa` and `d3.geoPath`, with data from the USDA’s county-level dataset. Hovering over a state triggers a basic tooltip showing the state name and unemployment value.

AI-generated description

Tooltips are basic hovers. It may take a couple of seconds to load and you have to click on the visualization first

Data from: https://www.ers.usda.gov/data-products/county-level-data-sets/download-data/ Data is cleaned to only feature states Used chapter 14 of Scott Murray's Interactive Data Visualization as Reference

MIT Licensed

Similar vizzes

Loading thumbnail…

State Choropleth Map

A choropleth map of the United States displays county-level unemployment rates from 2021, using a blue sequential color scale and a corresponding legend. The visualization is built with D3.js v5, leveraging `d3.geoPath` for rendering SVG paths, `d3.scaleThreshold` for color binning, and `d3.json` to load TopoJSON geographic data. A hover tooltip, implemented with a D3-selected `div`, reveals each county's specific unemployment percentage.

Mmariahdiaz

88% match

Loading thumbnail…

Choropleth map in D3

This choropleth map visualizes 2023 US unemployment rates by state, coloring each state with a sequential scale from the minimum to maximum unemployment values. Hovering over a state reveals a tooltip with its name and unemployment figure. Built with D3.js, it loads unemployment CSV data and US state TopoJSON boundaries, then projects the states using `d3.geoAlbersUsa` and renders them as SVG paths via `d3.geoPath`. The map joins the CSV data to the geometry using a state name-to-FIPS code mapping.

Kkfhujosefsson@dons.usfca.edu

87% match

Loading thumbnail…

Chloropleth Map

This choropleth map displays the 2022 unemployment rate for each U.S. state, with a blue sequential color scale indicating higher rates. It uses d3.geoPath with a d3.geoMercator projection to render state boundaries from a TopoJSON file, while a threshold scale maps unemployment percentages to d3.schemeBlues. Hovering over a state changes its fill to red via CSS. Data comes from a CSV file joined to state names, and tooltips show the exact rate per state.

AAllen Ho

87% match

Loading thumbnail…

d3 chorplath map

This choropleth map of the United States displays county-level unemployment rates using a quantized color scale. The visualization renders counties as SVG paths, colored from light to dark blues based on rates from 0 to 15 percent, with state boundaries overlaid in white. Built with D3 v3, it uses `d3.geo.albersUsa` and `d3.geo.path` for projection, TopoJSON for US county and state geodata, and a queue to load JSON and TSV data asynchronously.

JJn1532

85% match

Loading thumbnail…

D3 Choropleth Starter

A choropleth map of United States county unemployment rates, colored with a blue threshold scale. The map displays each county as a path, with hover tooltips showing the exact rate. The visualization loads county boundaries and unemployment data via Promises, then renders them using D3's `geoPath` and TopoJSON feature extraction. A legend with an axis shows the color scale, while state borders are drawn as a white mesh overlay.

AAlark Joshi

85% match

Loading thumbnail…

Section 1(a)-Making Maps Using TOPOJSON

This choropleth map visualizes 2024 US state unemployment rates using D3.js v7 and TopoJSON. It shows each state colored on a red-yellow-green sequential scale, where green indicates lower unemployment and red indicates higher rates, with hover interactions revealing exact percentages via a tooltip. The map uses `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries from the us-atlas TopoJSON dataset, while `d3.scaleSequential` with `d3.interpolateRdYlGn` drives the color encoding, and an SVG linear gradient legend communicates the scale.

SSYAM TEJ

85% match

Loading thumbnail…

Choropleth

This choropleth maps U.S. county-level unemployment rates from 2008, encoding values with a d3.scaleQuantize that bins rates from 0 to 15% into nine color classes. Rendered with SVG, the map uses a white state boundary overlay to delineate county borders, while the quantized color scale (from light blue to dark navy) visually distinguishes unemployment ranges. The visualization is built with D3 v4 and TopoJSON, and it includes a resize handler to scale the map responsively.

EEvertLagerberg

84% match

Loading thumbnail…

A9-US Choropleth Map

This animated choropleth map displays the 2020 census population for each U.S. state, using a color scale to encode population values with interactive tooltips. The visualization loads population data from a CSV file and U.S. state boundaries from TopoJSON, then uses `d3.geoAlbersUsa()` for the projection and `d3.geoPath()` to render the SVG paths. State polygons are colored by population via a color scale, with a tooltip showing details on hover.

Bbhavi.kenia@gmail.com

84% match