Home / Relationships / Heatmap
Heatmap in HTML, CSS and JavaScript
A heatmap is a grid of squares where color shows a value. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows gym check-ins by day and hour.
What is a heatmap?
A heatmap is a grid of squares where color shows a value. Rows and columns are two categories, like days and hours, and darker squares mean bigger numbers.
Patterns jump out at once: the after work rush, quiet weekend evenings, busy Monday. People read color faster than numbers, which is why heatmaps are so popular for times and schedules.
At a glance
- Best for
- Patterns across two categories, like day and hour
- Data you need
- A number for every row and column pair
- Skip it when
- When exact values matter more than the pattern.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a heatmap
- Busy times for shops, gyms or websites
- Sales by product and month
- Support tickets by team and weekday
- Any table of numbers people need to scan fast
When to pick another chart
- Correlation Matrix: you want to show how measures relate to each other
- Horizon Chart: you have one long time series per row
What you get in this template
- A 7 by 17 grid built from plain SVG squares
- One color scale from pale to deep purple
- Numbers inside the squares when there is room
- Arrow keys move around the grid one square at a time
- Tooltips with the share of the busiest hour
- Short labels on phones and a full data table
How the code works
Here is a short version of the idea behind this heatmap. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const days = ['Mon', 'Tue', 'Wed'];
const counts = [[27, 40, 30, 15, 60, 103], [31, 48, 33, 14, 57, 95], [30, 50, 32, 13, 51, 90]];
const max = 103, size = 40;
counts.forEach((row, i) => {
drawText(40, 60 + i * size + 25, days[i], 'end');
row.forEach((v, j) => {
const t = v / max;
const color = 'rgb(' + Math.round(247 - 173 * t) + ',' + Math.round(240 - 220 * t) + ',' + Math.round(252 - 142 * t) + ')';
drawRect(50 + j * size, 60 + i * size, size - 3, size - 3, color);
});
});The example uses four tiny helpers that create SVG shapes. Put them above the code and it runs as is.
const svg = document.querySelector('svg');
function make(tag, attrs) {
const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (const k in attrs) n.setAttribute(k, attrs[k]);
svg.appendChild(n);
return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
t.textContent = str;
return t;
}How to add it to your website
- Download the file. Click Download HTML file above. You get one file called heatmap.html with everything inside.
- Change the data. Open the file in any code editor and find the DATA list near the bottom. Replace the names and numbers with your own.
- Change the colors and text. Colors are at the top of the style tag. The title, subtitle and main point are plain HTML near the top of the body.
- Put it online. Upload the file to any host, such as GitHub Pages, Netlify or your own server, or paste it into your site. There is no build step.
Questions people ask
What is a heatmap used for?
A heatmap shows patterns in a grid of numbers using color. It is common for busy times, schedules, sales by month and website clicks.
How do I choose colors for a heatmap?
Use one color going from light to dark for values that only go up. Use two colors meeting at a neutral middle when values can be above or below a midpoint.
Should I show numbers in a heatmap?
If there is room, yes. Color shows the pattern and the numbers give the exact value. On small screens, keep the numbers in the tooltip.
Is a heatmap the same as a choropleth map?
No. A heatmap is a grid. A choropleth colors areas on a real map, like countries or regions.
More relationships
041. Scatter Plot
Example: used car prices against mileage
042. Bubble Chart
Example: ad campaigns compared on cost, conversion and budget
044. Correlation Matrix
Example: what drives daily sales at a cafe
045. Connected Scatter Plot
Example: monthly bike share trips against average temperature
046. Hexbin Plot
Example: distance and fare for 3,000 taxi rides
047. Contour Plot
Example: a hill walk with height lines and a trail
048. Radar Chart
Example: three laptops scored on six features
049. Parallel Coordinates Chart
Example: rental flats compared on six measures