Heatmap Generator
Render a color-coded heatmap in two modes: Matrix visualizes a CSV that's already shaped as rows×columns of numbers (a confusion matrix, a distance matrix), using a sequential color scale spanning its actual range. Correlation computes the pairwise Pearson correlation matrix directly from ordinary tabular data — pick 2+ numeric columns and it's calculated automatically, using a diverging scale centered on zero. Download as a PNG. Runs entirely client-side — nothing is uploaded.
Header row: blank cell, then column labels. Each data row: a row label, then one numeric value per column.
| A | B | C | D | |
|---|---|---|---|---|
| A | 12 | 20 | 8 | 30 |
| B | 5 | 18 | 25 | 10 |
| C | 22 | 9 | 15 | 28 |
| D | 14 | 26 | 11 | 19 |
About this tool
This tool renders a color-coded heatmap in one of two modes. Matrix mode takes a CSV that's already shaped as a matrix — a header row of column labels, then one row per label with that many numeric values — and colors each cell on a sequential light-to-dark scale spanning the matrix's actual min and max, useful for a confusion matrix, a distance matrix, or any pre-computed grid of numbers. Correlation mode takes ordinary tabular data instead: you pick 2 or more numeric columns, and it computes every pairwise Pearson correlation itself, using only rows where all the selected columns have a value (so every cell in the result is computed from the same underlying rows, not a different silently-varying subset per pair). Correlation cells use a diverging red-white-blue scale centered on zero, since zero is a meaningful reference point for correlation that a plain sequential scale would obscure. It runs entirely client-side — nothing you upload or paste is ever sent anywhere.
What you can do
- Two modes: visualize a matrix you already have, or compute one from raw data
- Correlation mode computes every pairwise Pearson correlation automatically
- Upload a .csv file, or paste CSV directly
- Download the heatmap as a PNG
- Nothing is uploaded — everything runs locally in your browser
How to use
Step 1
Pick a mode
Matrix, if your CSV is already rows×columns of numbers (a confusion matrix, a distance matrix). Correlation, if it's ordinary tabular data.
Step 2
Add your data
Upload a .csv file, or paste it directly. Correlation mode also needs you to pick which numeric columns to include.
Step 3
Download the result
Export the color-coded grid as a PNG.
Example
This tabular CSV, in Correlation mode:
CSV
temperature,ice_cream_sales,umbrella_sales 30,180,5 25,140,12 35,220,2 20,90,20
computes and colors the 3×3 correlation matrix between temperature, ice_cream_sales, and umbrella_sales directly — no manual correlation calculation needed first.
How your data is handled
This tool is labeled 🟢 Browser: your CSV is parsed and, in Correlation mode, the correlations are computed directly in your browser — nothing is uploaded to a server, and nothing about it is retained once you leave the page.
Frequently asked questions
What's the difference between Matrix and Correlation mode?+
Matrix mode visualizes numbers you already have arranged as a grid — you supply the values directly. Correlation mode starts from ordinary data (one row per record, one column per variable) and computes the pairwise correlation matrix for you, rather than requiring you to calculate it first.
Why do the two modes use different color scales?+
Matrix mode's values can be anything (counts, distances, scores) with no inherent center, so it uses a sequential scale spanning the data's actual range. Correlation values are always between -1 and 1 with a meaningful zero (no relationship), so correlation mode uses a diverging scale centered on white at zero — red for negative, blue for positive.
Why does correlation mode use only some of my rows?+
A row is included only if every selected column has a numeric value in that row — this keeps every cell in the resulting matrix computed from the exact same set of rows, rather than each pair of columns silently using a different subset depending on where their gaps happen to fall.
What does the header row need to look like in Matrix mode?+
The first cell is ignored (it's just a spacer above the row labels), followed by one column label per data column. Each data row then starts with its own row label, followed by exactly that many numeric values.
Is my CSV uploaded anywhere?+
No — whether uploaded as a file or pasted, everything happens directly in your browser, including the correlation calculations in Correlation mode. Nothing here ever leaves your device.