OneTaskBy Tim King · Updated
Heatmap Maker
Colour Grid Chart from a Table, Download SVG or PNG Free
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Heatmap Maker works
This heatmap maker shades a table of numbers by value. A heatmap turns a table of numbers into a grid of coloured cells, so the largest and smallest values jump out without reading a single figure. Paste a table with a header row of column names and a label at the start of each row, pick a colour scale, and download the chart as SVG or PNG. It works for anything laid out as rows against columns: teams by weekday, products by month, survey questions by respondent group, or a correlation matrix. Nothing is uploaded.
Heatmap maker: what to paste
The first row is the header: the first cell can be anything, the rest are the column labels. Every following row starts with a row label and then one number per column. Cells can be separated by commas or tabs, so a block copied from Excel, Google Sheets or Numbers pastes straight in. A cell that is blank or not a number is drawn in light grey and marked "no data" in its tooltip rather than breaking the chart, which makes sparse tables and matrices with a missing diagonal easy to plot.
Colour scales
Viridis, Inferno and Turbo are perceptually uniform scales that run from dark to bright, so equal steps in value look like equal steps in colour and the chart survives greyscale printing. The single-hue scales, Blues, Greens, Reds, Oranges and Greys, are quieter and suit a report where one colour matches the brand. Yellow to red is the classic intensity ramp. The three diverging scales are for data with a meaningful middle, such as change from a baseline or a correlation matrix: when the values cross zero the scale is centred on zero automatically, so negative and positive cells are shaded in opposite hues. Reversed flips whichever scale is chosen, useful when a high number is bad news and should look dark.
Fixing the scale
By default the scale runs from the smallest value in the table to the largest. Scale minimum and Scale maximum override either end, which matters when several heatmaps need to be comparable, when a single extreme cell would otherwise wash out the rest, or when the data has a natural range such as 0 to 100. Values outside the fixed range are clamped to the end colours.
Cell values and layout
Cell values prints the number inside each cell in black or white depending on how dark the cell is; it switches itself off when there are too many columns for the text to fit. Column labels rotate when they are too long to sit upright, and the grid height grows with the number of rows. Hover any cell for its row, column and value. The stats panel reports the grid size, the value range, the mean and which cell holds the highest value.
Exporting
Download SVG gives a vector file with one rectangle per cell and editable text. Download PNG renders at one, two or three times the preview width. Copy SVG puts the markup on the clipboard.
FAQ
Can I make a correlation matrix?
Yes. Paste the matrix with variable names as both the header row and the first column, choose a diverging scale and set the minimum to -1 and the maximum to 1 so the centre of the scale sits at zero and the colours mean the same thing on every chart you make.
How big a grid can it draw?
There is no hard limit; cells simply shrink to fit the width. Beyond about forty columns the labels and values stop being readable, so for very large matrices consider hiding the values and relying on the tooltip.
Why are some cells grey?
Grey marks a cell that was blank or contained text rather than a number. Check for stray units, currency symbols or thousand separators written with spaces, which stop a cell being read as a number.
Which colour scale should I use?
For plain magnitude, Viridis is the safe default because it is readable by people with the common forms of colour blindness and in greyscale. Use a diverging scale only when the data has a true midpoint; using one on all-positive data implies a divide that is not there.
See also: all Chart Makers tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Bar Chart Maker
Paste CSV, get a grouped or stacked bar chart; download SVG or PNG.
Colour Scale And Legend Generator
Build a gradient, stepped or category colour legend, download as SVG or PNG.
Scatter Plot Maker
Paste x,y pairs, get a scatter plot with trend line and r value.
Bubble Chart Maker
Paste name,x,y,size rows, get a labelled bubble chart; SVG or PNG.
SVG To PNG
Rasterise an SVG to a PNG at any width.