Charts
Heatmap Maker
Paste a grid of numbers and get a heatmap — on a single-hue scale, so darker always means larger.
Have a spreadsheet? Drop a CSV here
Or . CSV, TSV or plain text. You pick which column is which after it loads — the names in your file do not have to match ours. The file is read in your browser and never uploaded.
How to read this result
Colour encodes magnitude, so the scale must be ordered. A single hue running light to dark matches the order of the numbers. A rainbow scale does not: hue has no natural ordering, so a rainbow heatmap invents boundaries that are not in the data and hides ones that are.
Values are printed in the cells wherever they fit. Colour is good for spotting the pattern and poor for reading a number, so the table below the chart carries the precise values.
Row and column totals are usually the real finding. A heatmap shows which cells stand out; the margins show whether that is because the whole row is large or because that one cell is.
For data with a meaningful zero — differences, correlations, residuals — a diverging scale is better, with a neutral midpoint and two hues for the two directions. The sequential scale here is right for counts and magnitudes.
The formula
Each cell's position on the colour ramp, scaled to the full range of the matrix. That makes cells comparable within one heatmap and not across two with different ranges.
Worked example
Sales by product and region
Three products across four regions. Which combinations are strong, and is that a product effect or a region effect?
| North | South | East | West | |
|---|---|---|---|---|
| A | 12 | 19 | 7 | 15 |
| B | 22 | 14 | 18 | 9 |
| C | 5 | 11 | 25 | 13 |
- Find the range across every cell.5 to 25
- Each cell's shade is its position in that range.the 25 is darkest, the 5 lightest
- Row totals.A: 53 B: 63 C: 54
- Column totals.North 39, South 44, East 50, West 37
The row totals are nearly equal, so the pattern is not “product C sells more” — it is that C sells in the East and barely at all in the North. That interaction is exactly what a heatmap shows and a pair of bar charts does not.
Checked against arithmetic.
The calculator above is loaded with these numbers by the Load the worked example button.
Assumptions, and when to use something else
Every row must have the same number of cells, and the values must share a unit — mixing counts and percentages in one matrix makes the colour scale meaningless.
The scale is linear and spans the whole matrix. When one cell is an order of magnitude larger than the rest it flattens everything else to the palest shade; a log scale would be the fix, and it is not implemented here, so consider transforming the values first.
- You are testing whether the rows and columns are relatedChi-square testA heatmap of counts shows the pattern; chi-square says whether it is more than chance.
- You have a correlation matrixCorrelation coefficientA diverging scale suits correlations better than the sequential one here.
- You have too many scatter points to seeScatter plot makerFor two continuous variables rather than a grid.
Questions people ask
Why not a rainbow colour scale?
Because hue has no intrinsic order. A rainbow scale makes readers perceive boundaries where the data change smoothly and miss real differences where the hues happen to be similar. One hue from light to dark matches the order of the numbers and is readable in greyscale and by colour-blind viewers.
Can I use a heatmap for a correlation matrix?
Yes, and a diverging scale — one hue for positive, another for negative, neutral at zero — reads far better than the sequential scale used here, because zero is a meaningful midpoint.
What size of matrix can I paste?
Anything that fits on screen. Past about 30 columns the labels stop being legible and the values no longer fit inside the cells; the data table below remains complete.
How do I download the chart?
Every chart draws to a canvas in your browser. Use the download button for a PNG, or right-click the image and save it. Nothing is uploaded to produce it.