100%

US Metro Map of Unemployment Rates

✓ Published0🌍 Public

Last edited Oct 31, 2020

Created on Oct 7, 2020

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.

AI-generated description

Chloropleth Map with D3 & React

The purpose of this map is to imitate the functionality of the national metropolitan map from the Bureau of Labor Statistics, but allow user interactivity that only React.js can provide for multiple periods and to show the combined statistical areas, nit just the metro areas that disregard the micropolitan areas.

Resources

BLS LAU Data Base
US Census TIGER Shape Files FTP Server
Mapshaper is great to quickly format shapefiles

MIT Licensed

Similar vizzes

Loading thumbnail…

Chloropleth Map

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.

AAllen Ho

82% match

Loading thumbnail…

Metis United States Unemployment Rate

This example visualizes the 2017 United States unemployment rate by state using a choropleth map. State boundaries are colored on a linear scale from light gray to purple based on the rate in the `us-unemployment.csv` dataset. The visualization includes a text summary of average unemployment by region, calculated using `d3.nest()` and `rollup`. It uses `d3.geoAlbersUsa` projection with `d3.geoPath` for rendering GeoJSON, and SVG elements with mouseover tooltips display the specific rate for each state.

EElaineYu

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

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

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

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

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

79% match

Loading thumbnail…

Vega-Lite US Map Unemployment

A choropleth map of US state unemployment rates colors each state according to its quantitative rate, with a blue hover effect on state borders. The visualization loads US TopoJSON data from Vega’s repository and joins it with a TSV file mapping state IDs to unemployment percentages. It uses Vega-Lite’s `geoshape` mark, `albersUsa` projection, and a lookup transform to merge the datasets. The code leverages the vega-embed library, d3.csv for data loading, and vega-tooltip for interactive inspection, with the map rendered inside an HTML page using Vega-Lite’s API.

Yyuzhang21

78% match