Skip to main content
SimilarExport ZIP
100%

Fork of HeatMap:

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

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Heatmap

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.

Oomniaabouhassan@gmail.com
88% 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
87% 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
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
84% match
Loading thumbnail…

Fork of Fork by Yizhan Niu

This visualization explores U.S. state unemployment rates from October 2019 to September 2022. Users select a state from a dropdown menu to view its unemployment trend in an animated bar chart, while a geographic map displays the latest rates via blue dots sized with `d3.scaleLinear`. The bar chart updates smoothly using `d3.transition`, and hovering reveals tooltips. The map uses `d3.geoPath` with a topojson map and `d3.forceSimulation` for circle placement. Data is loaded via `d3.csv` from a gist.

FFarhaan Qazi
80% match
Loading thumbnail…

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.

Oomniaabouhassan@gmail.com
80% match
Loading thumbnail…

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.

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