Multiple datasets in 5.x

100%

Multiple datasets in 5.x

✓ Published0🌍 Public

Last edited Apr 6, 2018

Created on Apr 6, 2018

A choropleth map of U.S. county unemployment rates, rendered in SVG with D3 v5. County data is loaded asynchronously from a TSV file alongside TopoJSON geometry using Promise.all, then joined and mapped to color. The map uses a threshold color scale with a blue scheme, and includes a legend with an axis showing the unemployment rate percentages. State boundaries are overlaid as white lines.

AI-generated description

5.x implementation of a choropleth map using Promises.

Adapted 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 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

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

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

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

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

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

86% match

Loading thumbnail…

Gist 7bcb7bfb170746a20c14

This choropleth maps U.S. county-level unemployment rates from 2008, encoding values from 0 to 15% using a quantize scale with nine discrete color classes. The SVG visualization uses a Mercator projection and TopoJSON data for county and state boundaries. Unemployment data is loaded from a TSV file and joined to county IDs via a `d3.map`, with each county’s fill class (q0-9 through q8-9) assigned by the quantized rate, producing a blue sequential palette from light to dark. County boundaries are stroked in white and state borders in white with rounded joins, while the background remains transparent. The example highlights the use of quantize scales for continuous-to-discrete mapping and suggests a threshold scale as an alternative for arbitrary ranges.

11wheel

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

85% match