US Unemployment Bubble Map

Map of unemployment rate in the US

This visualization displays a map of the contiguous United States with red circles overlaid on each state, sized proportionally to a fake unemployment rate dataset. The map is rendered using D3’s `geoAlbersUsa` projection and `geoPath` to draw state boundaries from a TopoJSON file. Circle positions are computed with `geoCentroid` and scaled using `scaleSqrt`, with data loaded asynchronously from the us-10m atlas. The SVG output shows both the static gray state shapes and semi-transparent bubbles representing relative unemployment figures.

88% match

Fork of CO2 emissions bubble chart

This interactive map visualization displays unemployment rates across U.S. states, using a blue sequential color scale where darker shades represent higher percentages. Built with D3.js, the code loads state boundaries from GeoJSON via topojson-client, applies the geoAlbersUsa projection, and renders paths using d3.geoPath with fill colors assigned through d3.scaleQuantize. A legend automatically generates color-to-value mappings using the invertExtent method, while the chart title and margin-based layout structure the composition. The visualization demonstrates choropleth mapping with data-driven styling and interactive SVG rendering.

84% match

Fork of bubble chart

This interactive bubble chart compares unemployment rates over time across ten selected U.S. states. Each circle’s position encodes the year and unemployment percentage, while its size and color map to the rate and state, respectively, using d3.scaleLinear, d3.scaleOrdinal, and d3.schemeCategory10. The visualization includes a legend and interactive tooltips, rendering SVG elements with axis functions d3.axisBottom and d3.axisLeft. Data comes from the @oabouhas/unemployment package.

Unemployment Rate Heatmap

This interactive heatmap shows monthly unemployment rates for selected U.S. states, with darker blue cells indicating higher rates and a vertical legend mapping the discrete color thresholds. Hovering over any cell reveals a tooltip with the state, month, and exact unemployment percentage. The visualization is built using d3.scaleBand for the axes, d3.scaleThreshold for the color encoding, and SVG rectangles rendered with D3. Data comes from the "Unemployment in America Per US State" GitHub dataset, with states sorted by descending unemployment rate.

heatmap

This example displays state-level unemployment data on a map of the United States, using colored circles overlaid on geographic boundaries. The visualization loads US TopoJSON data and employs d3.geoAlbersUsa projection with d3.geoPath to render state shapes, while d3.scaleSequential with interpolateBlues colors each circle based on its unemployment rate. Interactive hover effects reveal tooltips showing the specific state name and percentage.

Q1-ASSIGN-8

This choropleth map displays 2023 US unemployment rates by state using a purple sequential color scale and an Albers USA projection. It employs `d3.geoPath` with the `topojson` library to render state boundaries from the us-atlas TopoJSON, while a custom tooltip shows state names and exact percentages. Data originates from the Bureau of Labor Statistics, rendered as SVG with a gradient legend indicating relative unemployment levels.

Kkpavithrasai@gmail.com

Kkfhujosefsson@dons.usfca.edu

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.

82% match