D3 Example

100%

✓ Published0🌍 Public

Last edited May 8, 2015

Created on May 8, 2015

This map visualizes unemployment rates for census tracts in San Mateo County, California (2010), with each tract colored using a quantile scale from ColorBrewer’s Greys palette based on its unemployment percentage. Hovering over a tract reveals the precise unemployment value, and users can pan and zoom by clicking, dragging, and scrolling. The visualization is rendered using SVG with a Mercator projection, and includes a legend showing the color scale in percentage terms. Data is from the County of San Mateo Open Data Portal, with tract shapes simplified from US Census TIGER/Line files using MapShaper.

AI-generated description

This map shows unemployment data for census tracts in San Mateo county, California, from 2010.

Hover to get details for each census tract.
Pan and zoom by clicking, dragging, and scrolling.

The idea for doing this was inspired by the San Mateo Hackathon. The data comes from County of San Mateo Open Data Portal. Census tract shapes originally downloaded from US Census 2010 TIGER/Line® Shapefiles: Census Tracts then simplified using MapShaper.

Draws from the D3 Choropleth Example.

Similar vizzes

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

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

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

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

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

76% match

Loading thumbnail…

Quantile Choropleth

A quantile choropleth maps U.S. county unemployment rates to a nine-step blue color scale, with state boundaries overlaid in white. The d3.v3 code uses `d3.scale.quantile` and `d3.geo.albersUsa` with `d3.geo.path` to render SVG paths. Data loads via `queue` and `d3.tsv`, while TopoJSON provides county and state geometries.

Mmbostock

74% match

Loading thumbnail…

US Census D3 Map

This map visualizes the 2018 unemployment rates for U.S. metropolitan and micropolitan areas, using color intensity to represent different percentage categories. Built with D3 v5 and Vue, it renders SVG paths from TIGER/Line boundary data combined with ACS 5-year estimates. The interactive legend filters regions by unemployment category, and hovering reveals specific values via tooltips.

AA. Parker Oakes

74% match

Loading thumbnail…

Threshold Choropleth

A Threshold Choropleth displays US county unemployment rates quantized into color bands. The map uses a threshold scale to map continuous rate values, ranging from two to ten percent, into discrete shades of purple. `d3.scale.threshold()` defines the domain boundaries and corresponding range colors. The visualization renders SVG paths for counties, colored via `style("fill")`, with state borders overlaid. Data is loaded from a TSV file containing county IDs and rates, and geospatial shapes come from a TopoJSON file processed with `topojson.feature` and `d3.geo.path()`.

Mmbostock

74% match