Fork of HeatMap

100%

Fork of HeatMap

✓ Published0🌍 Public

Last edited Nov 7, 2024

Created on Nov 7, 2024

Forked from 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.

AI-generated description

A simple heatMap that I built displaying the temperature through various cities throughout the months of 2016.

The csv has been modified to get the first 10 cities in the csv per month It also gets the first entry temperature of the month it's recorded in

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

87% match

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

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

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

78% match

Loading thumbnail…

Fork of Heatmap with p5.js

This heatmap visualizes abortion rates for 15–17-year-olds across eight U.S. states over sixteen years, using a green color scale from dark (low rates) to light (high rates). Data comes from a Kaggle dataset on pregnancy, birth, and abortion rates. Built with p5.js, the sketch loads a CSV via `loadTable()`, iterates through rows to draw color-coded squares using `square()`, and maps values to five discrete color bins. It includes axis labels, a title, and a legend with rate ranges.

Aahuynh8@dons.usfca.edu

78% match

Loading thumbnail…

Fork of Heatmap with p5.js

This heatmap displays abortion rates per 1,000 women among 15–17-year-olds across eight U.S. states over sixteen years, using a green color scale from dark (<10) to bright (>40). Each cell encodes one state-year pair. The visualization includes axis labels, a legend, and explicit value thresholds. Built with p5.js, the sketch loads CSV data via `loadTable` from a Gist and renders cells using nested loops, `square()`, and `fill()` based on conditional color assignments. The dataset originates from a Kaggle resource on pregnancy and birth rates, filtered for readability.

Iindira-antgrvty

78% match

Loading thumbnail…

p5 heatmap

This visualization displays a heatmap of yearly infection counts for US states from 1970 to 1980. It uses p5.js to render colored squares on a 1000x1000 canvas, with darker reds indicating higher infection numbers. The map includes state labels, year markers, and a color legend. Hovering over any square triggers a tooltip that reveals the exact year, location, and infection count. The data is loaded from a CSV file via the `loadTable` function, with square fill colors computed directly from the numeric infection values.

AAndrew

77% match

Loading thumbnail…

Fork of Jos

This visualization shows a choropleth map of US state unemployment rates from January 2020 to December 2022. A dropdown menu lets users select a specific month and year to update the map’s color encoding. The map uses a threshold color scale with dark brown for higher unemployment. Hovering over a state triggers a tooltip with details. The visualization is built with React and D3.js, using d3.geoPath to render the map from TopoJSON data and d3.csv to load the unemployment data.

Jjoslyn54

75% match