Skip to main content
SimilarExport ZIP
100%

Heatmap

✓ Published0🌍 Public
Oomniaabouhassan@gmail.com
Last edited Oct 22, 2024
Created on Oct 2, 2024

This heatmap visualizes U.S. unemployment rates across states and years, using a color scale from light gray to red to indicate low to high rates. It renders an SVG via D3.js (v7), with scales and axes built using `d3.scaleBand` and `d3.axisBottom`/`d3.axisLeft`, and colors assigned through `d3.scaleLinear`. Data loads from a CSV file using `d3.csv`. It includes axis labels, a legend, and a title, but no tooltips or interactivity beyond static rendering.

AI-generated description

The Unemployment Rates Heatmap project aims to provide a clear and interactive visualization of unemployment rates across various states in the US over different years. This can help policymakers, researchers, and analysts to identify trends, compare states, and assess the impact of economic policies. Features Interactive heatmap showing unemployment rates by state and year. Tooltips displaying detailed information on hover. Responsive design that adjusts to different screen sizes. Color-coded representation of unemployment rates for easy comparison

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HeatMap:

This visualization displays unemployment rates across US states for the year 2022, rendered as a single-column heatmap using shades of blue. Built with D3 v6, it uses `d3.scaleBand` for the x and y axes, `d3.scaleSequential` with an interpolateBlues color scale, and SVG rectangles for each state cell. Interactive tooltips appear on mouseover using D3's selection API, showing state name, year, and unemployment percentage. Data comes from a CSV file on unemployment per US state.

Oomniaabouhassan@gmail.com
88% match
Loading thumbnail…

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.

Oomniaabouhassan@gmail.com
86% match
Loading thumbnail…

Fork of HeatMap

This heatmap visualizes monthly unemployment rates across US states, using a grid where each cell’s color intensity reflects the rate, with hover interactions revealing exact values. Built with p5.js, it loads CSV data via `loadTable`, processes rows into states, months, and rates, and renders colored squares via `square()` and a custom `colorScale`. The color mapping shifts from red to blue as rates increase, and a legend with a gradient scale aids interpretation. The dataset is sourced from a GitHub-hosted CSV on unemployment in America.

Oomniaabouhassan@gmail.com
85% match
Loading thumbnail…

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.

Oomniaabouhassan@gmail.com
85% match
Loading thumbnail…

US Unemployment Bubble Map

This interactive bubble map visualizes U.S. unemployment rates by state for 2022, with each bubble’s size and color intensity reflecting the unemployment percentage. Users can hover over bubbles to view tooltips with state names and exact rates, while a gradient legend indicates the rate range, and zoom and pan controls allow regional exploration. Built with D3.js, it uses `d3.geoPath` and the `geoAlbersUsaTerritories` projection to render state boundaries, `d3.scaleSqrt` for bubble radii, and `d3.scaleSequential` with `interpolateReds` for coloring. Data comes from the `@oabouhas/unemployment` package, and state centroids are calculated via `d3.geoCentroid` from TopoJSON US Atlas data.

Oomniaabouhassan@gmail.com
81% match
Loading thumbnail…

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.

Oomniaabouhassan@gmail.com
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 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
80% match