Skip to main content
SimilarExport ZIP
100%

Chloropleth Map

✓ Published0🌍 Public
AAllen Ho
Last edited Apr 2, 2024
Created on Mar 25, 2024
Forked from HTML Starter

This choropleth map displays the 2022 unemployment rate for each U.S. state, with a blue sequential color scale indicating higher rates. It uses d3.geoPath with a d3.geoMercator projection to render state boundaries from a TopoJSON file, while a threshold scale maps unemployment percentages to d3.schemeBlues. Hovering over a state changes its fill to red via CSS. Data comes from a CSV file joined to state names, and tooltips show the exact rate per state.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Choropleth Map

This example uses a choropleth map to display the unemployment rate (%) for each U.S. state. The color of each state corresponds to its value, with a legend on the right providing the scale. The map is rendered using D3.js (v5) and React, with the `d3.geoPath` projection drawing the state boundaries and a TopoJSON mesh creating the white state separations. A tooltip is appended to each state path to reveal the exact state name and unemployment rate. The data is stored in a Map object and applied to each state's fill color via the `color` scale.

Rrobertmreedy
90% 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
86% 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
86% 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…

Projected Choropleth

A choropleth map shows unemployment rates by U.S. county, using a blue sequential color scale with nine quantized classes for rates from 0 to 15 percent. State boundaries appear as white lines, while counties are drawn as SVG paths. The map uses pre-projected TopoJSON data, created via the `topojson` command-line tool with the `d3.geo.albersUsa()` projection, and renders using `d3.geo.path()`. County geometries and unemployment rates are joined into a single file during preprocessing, eliminating separate data loads. This variation of the classic unemployment choropleth simplifies the workflow by embedding the projection and data join directly into the TopoJSON generation step.

Mmbostock
84% 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
84% match
Loading thumbnail…

US Metro Map of Unemployment Rates

A choropleth map of the United States displays unemployment rates for combined statistical areas, with each region colored by its rate for September 2020 from BLS LAU data. React renders the SVG, while D3 v5’s geoAlbersUsa projection and geoPath draw state boundaries and metropolitan shapes from Census TIGER TopoJSON files. Hovering a metro area reveals a tooltip with its name, FIPS code, and unemployment percentage.

PParker
82% match