County Choropleth

100%

County Choropleth

✓ Published3🌍 Public

Last edited Aug 14, 2024

Created on Aug 12, 2024

This visualization is a county-level choropleth map of the unemployment rate across the United States, using data from August 2016. The map is rendered with an Albers equal-area projection that includes all US territories, drawing county boundaries with `d3.geoPath` and colored using a quantile scale with the Inferno color palette via `d3.scaleQuantile` and `d3.interpolateInferno`. Counties with missing data appear red, while state boundaries are stroked in white. The implementation uses `d3.select` and `.join` for idempotent rendering, with `getUSAtlasData` fetching GeoJSON from the `us-atlas` package and `d3.json` for data loading.

AI-generated description

An adaptation of the D3 Choropleth Example that uses vanilla JavaScript. Shows Unemployment rate by U.S. county, August 2016.

Some key differences from the original implementation include:

Uses unidirectional data flow and idempotent rendering
Supports hot reloading
Uses the geo-albers-usa-territories projection, which includes all US territories
Colors missing data red.

MIT Licensed

Similar vizzes

Loading thumbnail…

Map

This visualization presents a choropleth map of U.S. county-level unemployment rates, where each county is colored according to its rate using a quantile color scale from the Inferno palette. The map uses D3's `geoPath` and `geoAlbersUsaTerritories` projection to render county and state boundaries from TopoJSON data. A linked histogram at the bottom allows for interactive brushing to highlight counties within a selected unemployment rate interval. The example demonstrates the D3 General Update Pattern for dynamic styling and attribute updates.

BBashir Gulistani

88% match

Loading thumbnail…

Map

A choropleth map displays U.S. county unemployment rates for August 2016, colored with a quantile scale and the d3.interpolateInferno palette. A brushable histogram below the map visualizes the rate distribution; brushing it highlights matching counties on the map with d3.brushX. Pan and zoom interactions rely on d3.zoom and d3.geoPath with a geoAlbersUsaTerritories projection. The map renders via SVG using TopoJSON county boundaries from the us-atlas dataset.

BBashir Gulistani

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

87% match

Loading thumbnail…

Zoomable County Choropleth

This example visualizes unemployment rates across U.S. counties from August 2016 using a digital choropleth map. The map, rendered with `d3.geoPath` and a `geoAlbersUsaTerritories` projection, colors each county using a `scaleQuantile` with `interpolateInferno`. It supports interactive zooming and panning via `d3.zoom`, with `d3-rosetta` managing state and efficient DOM updates. County boundaries and state meshes come from the `us-atlas` TopoJSON dataset, while the unemployment figures are loaded from a local CSV file.

CCurran Kelleher

87% match

Loading thumbnail…

Choropleth map

This choropleth map displays U.S. county-level unemployment rates as of August 2016, using a threshold scale with a blue sequential color scheme. The map is rendered as SVG with `d3.geoPath` and TopoJSON data from the Census Bureau and the Bureau of Labor Statistics. A legend with a linear axis shows the percentage ranges, and hovering over a county reveals its exact rate via a tooltip. The code also demonstrates preprocessing the raw fixed-width text data into a TSV using command-line utilities like `dsv2dsv`.

EEleonore9

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

86% match

Loading thumbnail…

Choropleth

A choropleth map of U.S. county unemployment rates for August 2016, drawn as SVG paths using `d3.geoPath`, colors each county with a `d3.scaleThreshold` and the `d3.schemeBlues` color scheme. A legend displays the color scale via a linear axis. The map uses TopoJSON from the U.S. Census Bureau and unemployment data from the Bureau of Labor Statistics, loaded with `d3.queue` and `d3.tsv`. State boundaries are overlaid as a white mesh using `topojson.mesh`.

Mmbostock

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