D3 Example

100%

✓ Published0🌍 Public

Last edited Feb 24, 2016

Created on Feb 24, 2016

This interactive choropleth map visualizes 2010 unemployment rates by census tract in San Mateo County, California. It uses D3’s geo and zoom behaviors to render SVG paths from TopoJSON shapefile data, with colors scaled by an unemployment dataset from the county’s open data portal. Hovering reveals a tooltip with the exact percentage for each tract. The map is drawn using `d3.geo.mercator`, `d3.geo.path`, and `d3.behavior.zoom`.

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.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/9b193942e2fc4ac88c6e'>Unemployment in San Mateo County</a>

Similar vizzes

Loading thumbnail…

D3 Example

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.

CCurran Kelleher

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

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

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

79% match

Loading thumbnail…

Section 1(a)-Making Maps Using TOPOJSON

This choropleth map visualizes 2024 US state unemployment rates using D3.js v7 and TopoJSON. It shows each state colored on a red-yellow-green sequential scale, where green indicates lower unemployment and red indicates higher rates, with hover interactions revealing exact percentages via a tooltip. The map uses `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries from the us-atlas TopoJSON dataset, while `d3.scaleSequential` with `d3.interpolateRdYlGn` drives the color encoding, and an SVG linear gradient legend communicates the scale.

SSYAM TEJ

79% match

Loading thumbnail…

Choropleth map in D3

This choropleth map visualizes 2023 US unemployment rates by state, coloring each state with a sequential scale from the minimum to maximum unemployment values. Hovering over a state reveals a tooltip with its name and unemployment figure. Built with D3.js, it loads unemployment CSV data and US state TopoJSON boundaries, then projects the states using `d3.geoAlbersUsa` and renders them as SVG paths via `d3.geoPath`. The map joins the CSV data to the geometry using a state name-to-FIPS code mapping.

Kkfhujosefsson@dons.usfca.edu

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

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

78% match