Heatmap generator — colour a grid of numbers by size

How to use the heatmap generator

1. Paste your grid into Matrix data. Copying a block of cells from a spreadsheet works, because tabs are accepted as separators.
2. Type a Chart title.
3. Pick a Colour scale: Blues, Greens, Oranges, Purples, Greys or Diverging (blue – white – red).
4. Choose whether to Show values in cells, and how many Decimals to print (0–6; whole numbers stay whole).
5. Set the Background and Width, then copy the SVG or download heatmap.svg. The Matrix (as parsed) table shows exactly what was read.

What it does and when to use it

A heatmap turns a table into a picture. Instead of reading 42 numbers one by one, the eye finds the dark patches first: the busiest hour of the week, or the subject where a class struggles.

It works best when rows and columns are both categories and every cell is the same kind of number, such as visits, scores or percentages. For a single series, a bar chart shows exact sizes more precisely. If you need to build the grid first from a long list of records, the pivot table builder can sum or count values by two fields, and its CSV pastes straight in here.

How it works

The tool finds the lowest and highest numbers in the grid. Each cell gets a position t between 0 and 1:

t = (value − lowest) ÷ (highest − lowest)

That position picks a colour along a five-step scale, blended in a straight line between neighbouring steps. On the diverging scale, t is measured from the centre instead, using the larger distance on either side, so equal gains and losses get equally strong colours. A gradient legend under the grid shows the lowest, (centre) and highest values. Cell text switches between dark and white to stay readable. The SVG has a <desc> such as “Heatmap of 7 rows by 6 columns; values from 5 to 63”.

Worked examples

Store visits by hour (the sample). Seven days by six times of day. Values run from 5 (Sunday 8am, palest) to 63 (Friday 12pm, darkest blue). The lunchtime column is dark every weekday, and the weekend rows are paler. The parsed table includes Fri | 22 | 45 | 63 | 50 | 36 | 18.

Change around zero. A 2 × 2 grid X: -2, 4 and Y: 0, 1 on the diverging scale. The 0 cell is white, -2 is blue and 4 is the strongest red. The legend runs from -4 through 0 to 4, so -2 is drawn half as strong as 4.

Term grades with a gap. Maths 62, (blank), 71 and English 74, 78, 80 on the Greens scale with 0 decimals. The blank Term 2 cell is grey with a dash, and the description reads “values from 62 to 80”.

Limits and tips

• Very small differences can look large, because the scale always stretches from your lowest to your highest value. Check the legend numbers.
• For a PNG, use the SVG to PNG converter.