Skip to main content
SimilarExport ZIP
100%

Zoomable Choropleth to be gutted

✓ Published0🌍 Public
SSamagoue
Last edited Oct 2, 2018
Created on Oct 2, 2018

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.

AI-generated description

Block-a-Day #11. Clicking on a state zooms the map to that state and shows county-level data.

Data Sources: BLS.

What I Learned: Trying out the new projection.fitExtent(). In the process, learned about adaptive resampling, which can break interpolation by changing the number of coordinates in a path at different zoom levels. Fixed the resulting bug by setting projection.precision() to 0, effectively turning off resampling.

What I'd Do With More Time: Finding a way to include Alaska and Hawaii is an obvious next step (albersUSA didn't immediately work with this technique). Could probably use more detailed county shapefiles.

Block-a-Day

Just what it sounds like. For fifteen days, I will make a D3.js v4 block every single day. Rules:

  1. Ideas over implementation. Do something novel, don't sweat the details.
  2. No more than two hours can be spent on coding (give or take).
  3. Every. Single. Day.

Previously

forked from <a href='http://bl.ocks.org/cmgiven/'>cmgiven</a>'s block: <a href='http://bl.ocks.org/cmgiven/d39ec773c4f063a463137748097ff52f'>Zoomable Choropleth</a>

forked from <a href='http://bl.ocks.org/pmia2/'>pmia2</a>'s block: <a href='http://bl.ocks.org/pmia2/4b37a90a24d1004c14c8e9ceae826342'>Zoomable Choropleth</a>

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
97% 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
89% match
Loading thumbnail…

Zoomable US States

A choropleth map of US states and counties uses employment location quotients from the Bureau of Labor Statistics' QCEW survey to shade each county. Clicking a state triggers a zoom animation that reveals its counties, applying a square-root color scale to the data. The visualization is built with D3 v3, using `d3.geo.Mercator`, `d3.geo.path`, and TopoJSON to render state boundaries and county polygons as SVG.

SSamagoue
84% match
Loading thumbnail…

Gist d8a8c52a3d98232cd513f1f5364a6e5c

This example displays a choropleth map of U.S. county unemployment rates, using a blue sequential color scale ranging from light to dark shades. The map is rendered as SVG paths via `d3.geo.path` with an Albers USA projection, while county data is joined to `d3.map` values from an external TSV. State boundaries are drawn as a white mesh overlay using TopoJSON. The code relies on `queue`, `d3.json`, `d3.tsv`, and `d3.scale.quantize` to bin rates into nine classes.

JJn1532
83% 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
83% 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
83% match
Loading thumbnail…

Fork of Choropleth with Multidimensional Filtering

This interactive visualization links a choropleth map of U.S. county unemployment rates from the BLS with a brushed histogram of the same metric. Brushing the histogram filters the map, dimming counties outside the selected range while highlighting those within it. Users can hover over counties to see their exact values. The implementation uses d3.geoPath with a geoAlbersUsaTerritories projection, d3.scaleQuantile with an inferno color scale, and d3.brushX for the histogram’s interactive interval selection. Data comes from a JSON dataset of unemployment rates for August 2016.

Oomniaabouhassan@gmail.com
82% match
Loading thumbnail…

Gist 5665764

This choropleth maps U.S. county-level unemployment rates from 2008 using a quantize scale, which assigns each county to one of nine color classes based on rates from 0 to 15%. The map is rendered with SVG paths for counties, colored via CSS classes q0-9 through q8-9, and includes state boundary outlines overlaid for context. The data is loaded from an external TSV file, and clicking a county or hovering over a state logs the element or feature to the console.

11wheel
82% match