Zoomable County Choropleth

100%

Zoomable County Choropleth

✓ Published1🌍 Public

Last edited Oct 9, 2025

Created on Aug 12, 2024

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.

AI-generated description

An adaptation of the D3 Choropleth Example that uses vanilla JavaScript. Shows Unemployment rate by U.S. county, August 2016. Modified to add zooming, leveraging utilities from d3-rosetta.

MIT Licensed

Similar vizzes

Loading thumbnail…

Zoomable Choropleth

A zoomable choropleth of U.S. unemployment rates by state and county. Clicking a state zooms the map to that state, revealing county-level data with smooth animated transitions; clicking a county returns the view to the full country. Built with D3 v4, it uses `d3.geoPath` with an Albers projection, `projection.fitExtent` for zooming, and `transition` for animations. A threshold color scale encodes unemployment values from BLS data, and county shapes are rendered as SVG paths.

SSamagoue

89% match

Loading thumbnail…

Zoomable Choropleth to be gutted

This zoomable choropleth of U.S. county unemployment rates shows state-level data that animates to a county-level view when a state is clicked, with the option to zoom back out by clicking a county. Built with D3.js v4, it uses the `d3.geoAlbers` projection, `d3.geoPath`, and `projection.fitExtent()` to smoothly transition the map. The colors encode unemployment data from the BLS, and the code also sets `projection.precision(0)` to prevent interpolation issues during zoom animations.

SSamagoue

89% match

Loading thumbnail…

County Choropleth

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.

CCurran Kelleher

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

86% match

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

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

Choropleth with Histogram Brushing

This interactive data visualization displays the unemployment rate by U.S. county for August 2016. A choropleth map uses a quantile color scale with four bins, rendered via `d3.geoPath` and the `geo-albers-usa-territories` projection. A linked histogram below the map, built with `d3.bin` and `d3.brushX`, allows users to brush a range of values, which highlights matching counties on the map while dimming others. The visualization also supports zooming through the `d3.zoom` utility, with map rendering optimized using memoization.

CCurran Kelleher

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

84% match