Skip to main content
100%

d3 heatmap

✓ Published0🌍 Public
AAndrew
Last edited Feb 21, 2024
Created on Feb 21, 2024
Forked from HTML Starter

This example visualizes yearly infection counts for US states from 1970 to 1980 using a heatmap. Cells are colored on a red scale, with darker shades representing higher infection numbers, and hover interactions reveal a tooltip with state, year, and exact count. The visualization uses d3.csv to load data, appends SVG text elements for labels and legend, and creates colored rect elements for each data point. The tooltip is positioned with event.pageX and event.pageY, while the legend is drawn manually with a loop generating gradient rectangles.

AI-generated description

A health heatmap in D3

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://corgis-edu.github.io/corgis/csv/health/

MIT Licensed

Similar vizzes