Skip to content
misoto22 design

Data

Heatmap

A grid of values read by weight.

When to reach for it

A calendar of activity, a confusion matrix, an hour-by-weekday load. The one form a monochrome system renders better than a chromatic one.

Examples

default

Commits by weekday and hourDarker is busier
Commits by weekday and hour
Row0003060912151821
Mon8Mon, 008Mon, 0332Mon, 0653Mon, 0967Mon, 1272Mon, 1567Mon, 1853Mon, 21
Tue8Tue, 008Tue, 0332Tue, 0653Tue, 0967Tue, 1272Tue, 1567Tue, 1853Tue, 21
Wed8Wed, 008Wed, 0332Wed, 0653Wed, 0967Wed, 1272Wed, 1567Wed, 1853Wed, 21
Thu8Thu, 008Thu, 0332Thu, 0653Thu, 0967Thu, 1272Thu, 1567Thu, 1853Thu, 21
Fri8Fri, 008Fri, 0332Fri, 0653Fri, 0967Fri, 1272Fri, 1567Fri, 1853Fri, 21
Sat2Sat, 002Sat, 039Sat, 0615Sat, 0919Sat, 1220Sat, 1519Sat, 1815Sat, 21
Sun2Sun, 002Sun, 039Sun, 0615Sun, 0919Sun, 1220Sun, 1519Sun, 1815Sun, 21

diverging

Weekly delta against targetZero is the page; darker is further from target in either direction
Weekly delta against target
RowW1W2W3W4W5W6
Platform034366-30-38
Growth4017-21-40-2216
Mobile-10-38-31Mobile, W4: no data3634
Data-37-7293913-25

Notes

A grid of values read by weight — a calendar of activity, a confusion matrix, an hour-by-weekday load.

The one form in the set that a monochrome system renders BETTER than a chromatic one. A heatmap needs a scale whose order the eye can read without consulting a legend, and lightness is the only channel that is unambiguously ordered — which is why "one hue, light to dark" is the standing advice everywhere else, and why the rainbow heatmap is a perennial mistake. Here there is no hue left to get wrong.

It is built as a real <table> rather than as an SVG, so the structure a screen reader walks is the structure the eye reads: a header row, a header column, and a cell that announces its own value. Nothing else in the package can say that, and nothing else needs to — which is also why this one takes no rendering engine at all.

Props

Heatmap props
PropTypeDefaultDescription
cellsrequiredHeatmapCell[]—
columnsrequiredstring[]Column headers, in the order they should appear.
rowsrequiredstring[]Row headers, in the order they should appear.
titlerequiredstringWhat the grid shows. Required, and it names the table.
classNamestring—
descriptionReactNodeA line under the title — the unit, the window, the caveat.
domain[number, number]The domain, as `[min, max]`. Derived from the data when omitted. Pin it whenever two grids are meant to be compared: two heatmaps on independent domains look alike and mean different things, which is the one failure a shared legend cannot fix.
formatValue(value: number) => string(value) => value.toLocaleString()Formats a value for the cell's announcement and its printed label.
scaleHeatmapScale'sequential'—
showTitlebooleanfalsePrints the title above the grid instead of hiding it from sight.
showValuesbooleanfalsePrints the number inside each cell. Only legible on a coarse grid.

Types

TSX
export type HeatmapScale = 'sequential' | 'diverging'

Accessibility

  • A real <table>, not an SVG: the structure a screen reader walks is the structure the eye reads, and every cell announces its own row, column and value.
  • Lightness is the only channel that is unambiguously ordered, which is why the standing advice everywhere else is “one hue, light to dark”. Here there is no hue left to get wrong.
  • A null is drawn as a dashed outline, never as the palest cell — a missing reading is not a zero.
  • Pin domain whenever two grids are compared: on independent domains they look alike and mean different things, which is the one failure a shared legend cannot fix.

Related

TableScatterChart