Choropleth w/ state highlighting

100%

Choropleth w/ state highlighting

✓ Published0🌍 Public

Last edited May 25, 2016

Created on May 24, 2016

This choropleth displays U.S. county unemployment rates colored on a quantize scale from light to dark blue, overlaid with white state boundary lines. When hovering over a county, its outline turns red and all counties outside that county’s state fade to 50% opacity, using CSS classes generated from the state FIPS code to highlight the state containing the hovered county. The map uses an Albers USA projection and is built with D3 v3 and TopoJSON, with county fill colors mapped from unemployment data.

AI-generated description

This adds a highlighting effect to the unemployment choropleth. When hovering over a county, it's outline (stroke) changes to red and all counties not in that state fade to .5 opacity, effectively highlighting the state it's in.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4060606'>Choropleth</a>

gpl-3.0 Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Choropleth V5

This choropleth map visualizes county-level unemployment rates across the United States. Using D3 v5 with SVG rendering, the example loads county and state boundary geometries from a TopoJSON file and joins them to unemployment rate data from a TSV file via Promises. A threshold color scale maps unemployment percentages (2–10+) to a blue sequential scheme, with a horizontal legend positioned at the top of the map. County polygons are filled according to their rate, with tooltips showing the exact percentage, while state boundaries are overlaid as white strokes. The map is paired with an axis showing the unemployment-rate scale.

Aadamjanes

89% match

Loading thumbnail…

Chloropleth

This choropleth maps 2008 U.S. county unemployment rates, encoding each county’s rate with a color from a blue sequential palette. The data is loaded from an external TSV file and joined to county geometries from TopoJSON. A d3.scale.quantize maps the continuous unemployment domain (0 to 15%) to nine discrete CSS classes, q0-9 through q8-9, with darker blues representing higher rates. The map is rendered with SVG using an Albers USA projection, and state boundaries are drawn as white lines over the colored counties. This example is copied directly from Mike Bostock.

Aandyreagan

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

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

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

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

88% match

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