This entry is part of the Chart Index, the reference library for the Chart Design Field Guide.
The table is the form analysts dismiss as just data, and the form readers reach for first when they want a specific number. A well-designed table is a chart: it makes values comparable, exposes structure, and supports both scanning and reading. Add colour to the cells and the table becomes a heatmap — the same matrix, with magnitude encoded as hue or lightness rather than glyph.
The two forms sit on a continuum. A table answers what was the value?; a heatmap answers where are the high and low regions of this matrix? Most analytical tasks need both, which is why the best tabular displays combine numbers and colour.
What it is
A table arranges values in rows and columns. Each cell holds a number, label, or marker. The structure encodes relationships — row by row (a record) and column by column (a variable) — and the eye reads it as a grid. A heatmap is a table where the cell background is mapped to a colour scale that encodes the cell's value, often with the number retained or omitted depending on the design intent.
A 24 × 4 grid: regions down, hours across, latency encoded as lightness. Even without reading specific values, the eye picks out the diagonal of business-hours-by-region (each region's local peak shifts with its time zone) and the global pre-dawn quiet. A standard line chart of four regional series would have buried this.
When to use it
Tables and heatmaps are the right choice when:
- The reader needs specific values as well as overall pattern — a table provides both; a chart gives up the values.
- You have a two-way matrix of categorical or ordinal variables — region × hour, product × cohort, week × day.
- You have too many cells for any other form — a treemap or bar chart with 200 entries is unreadable; a sparse heatmap with 200 cells is scannable.
- The data is comparable across rows and columns — same units, same direction-of-good.
- You want to support both scanning and reading — the heatmap helps the eye find regions of interest; the values let the reader confirm.
When not to use it
- Comparing magnitudes precisely. A heatmap encodes value as lightness, which is one of the least accurate perceptual channels. For precise comparison, fall back to a bar chart.
- One-dimensional data. A heatmap of a single variable is just a coloured bar chart. Use bars.
- Sequential x-axis with a clear trend. A 24-cell heatmap of one day's traffic is harder to read than a line chart of the same data.
- Categorical comparison with no inherent matrix structure. Revenue by region alone is a bar chart, not a heatmap.
Design principles
Right-align numbers, left-align labels
Numbers are read by comparing digit columns — ones place to ones place. Right-aligning them puts the decimal points and digit columns in a single vertical band. Labels are read left-to-right; left-align them. This is the single highest-impact change to any sloppy table.
Use a monospaced or tabular-figures font for numbers
Proportional digit widths (the default in most fonts) shift values out of column alignment: a 1 is narrower than a 4. Tabular figures fix every digit at the same width. Either use a monospaced font or enable tabular figures (font-feature-settings: 'tnum';). The improvement is dramatic.
Limit decimal places to the precision the reader needs
A revenue table with values like 4,238,617.93 asks the reader to parse seven significant figures when the message is in the first three. Round to the level of precision that matters: 4.24m or 4,239 k. Few: show the resolution you mean to show, not the resolution your tool defaults to.
Quiet the grid
Tufte's principle: minimise non-data ink. Rule lines on every cell create a grid of jail bars. Use a single light rule between rows, no vertical rules, and rely on alignment to read columns. Heavy gridlines obscure the data.
Use colour as a layer, not the data
In a heatmap, the colour scale should reinforce the structure, not replace the numbers. For ordered data (counts, rates, durations), use a sequential scale that goes from light to dark in one direction. For data with a meaningful midpoint (above/below average, positive/negative change), use a diverging scale.
Sort to reveal structure
A heatmap of randomly-ordered rows reads as noise. Sort rows and columns by similarity (hierarchical clustering, seriation) or by a meaningful key (region, time, magnitude). The structure reveals itself only when neighbouring rows are similar.
Annotate the most-extreme cells
In a 24 × 12 heatmap, the eye can pick the bright and dark regions. But for the values that matter — the highest cell, the unexpected low — direct labels (the number itself, in the cell) help. Few's principle: minimise visual lookup.
Choose the colour-blind-safe scale
Default rainbow scales are perceptually non-uniform and fail for many colour-blind readers. Use a perceptually uniform sequential scale (viridis, magma, or a single-hue ramp tuned in LAB space). Test in greyscale; the scale should still read as a sequence.
Anatomy
A heatmap is structurally simple: a matrix of cells, a colour scale, axis labels. The design weight goes into colour choice, cell sizing, and the discipline of showing values inside the cells when precision matters.
Related types
- Calendar heatmap — a heatmap arranged as days × weeks. Specialised for daily activity over months or years. Separate entry.
- Treemap — for hierarchical part-to-whole. Different reading task; both involve coloured rectangles.
- Confusion matrix — a heatmap of predicted vs. actual classifications. The same form applied to model evaluation.
- Choropleth — a heatmap projected onto geography. Separate entry.
- Sparkline-augmented table — a small chart per row, embedded in the table cell. Tufte's preferred form for many time-series-by-category tasks.
Reading list
- Tufte, E. (2006). Beautiful Evidence. On the table-graphic and dense information design.
- Wilkinson, L. & Friendly, M. (2009). The History of the Cluster Heat Map. The genealogy of the form.
- Bertin, J. (1967). Semiology of Graphics. The original visual variables, including the matrix.
- Few, S. (2007). Now You See It. On tabular display for analytical work.