Darker cells mean a higher score for this topic on that metric.
LessMore
Last reviewed Sources & creditsMedia creditsMethodology
Quick answers
When should I pick Heatmap?
When the story is: patterns across two categorical axes at once.
When should I avoid Heatmap?
Skip it in cases like: precise lookup of a number, or a rainbow that is not color-blind safe.
Who invented or popularised it?
Toussaint Loua’s 1873 crime tables; later Toussaint/Bertin and 1990s gene arrays
What does it encode?
color value of a cell in a row-column grid
Is it OK in ads?
Yes if one claim is visible at a glance in Meta, Google and retail print; otherwise link to a full figure.
Will a teacher accept it?
Yes for lab reports and poster boards if axes, units and a source line are present.
Heatmap encodes values as color value of a cell in a row-column grid. Toussaint Loua’s 1873 crime tables; later Toussaint/Bertin and 1990s gene arrays.
In reports, ads and assignments it fits patterns across two categorical axes at once. Skip it when precise lookup of a number, or a rainbow that is not color-blind safe.
Software
- Software 1 — Excel or Google Sheets
- Software 2 — PowerPoint
- Software 3 — Figma / Illustrator — ad and poster shapes
- Software 4 — Python matplotlib or R ggplot — assignment and research figures
- Software 5 — This atlas's server-rendered SVG — examples without a chart library
Exports
- Exports 1 — SVG
- Exports 2 — PDF
- Exports 3 — EMF/SVG into slides (no screenshots)
- Exports 4 — SVG for web, PDF for print
Accessibility
- Accessibility 1 — Never hue alone. Stack pattern, label and position.
- Accessibility 2 — 4.5:1 for text, 3:1 for large marks.
- Accessibility 3 — Short alt text on the chart; numbers also as an HTML table.
- Accessibility 4 — Motion only as emphasis. Honour prefers-reduced-motion.
Heatmap: honour color value of a cell in a row-column grid, and switch when precise lookup of a number, or a rainbow that is not color-blind safe.