Home / Relationships / Correlation Matrix
Correlation Matrix in HTML, CSS and JavaScript
A correlation matrix is a grid that shows how strongly each pair of measures rises and falls together. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows what drives daily sales at a cafe.
What is a correlation matrix?
A correlation matrix is a grid that shows how strongly each pair of measures rises and falls together. Each square holds a number from -1 to +1, and color makes the strong links easy to spot.
A value near +1 means the two go up together, near -1 means one goes up as the other goes down, and near 0 means there is no clear link. Only half the grid is shown, because the other half would repeat it.
At a glance
- Best for
- Finding which measures are linked
- Data you need
- Several numbers recorded for the same items or days
- Skip it when
- Proving cause and effect. It only shows links.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a correlation matrix
- Sales against weather, footfall and day of week
- Survey questions that tend to be answered alike
- Health, fitness or sensor readings
- Choosing which measures to track
When to pick another chart
- Scatter Plot: you want to look closely at one pair
- Heatmap: your grid is two categories, not pairs of measures
What you get in this template
- Correlation values shown in a lower triangle so nothing repeats
- Blue for together, red for opposite, fading to white near zero
- Tooltips that explain each value in plain English
- Every square can be reached with the Tab key
- Numbers inside squares when there is room
- A full correlation table for copying
How the code works
Here is a short version of the idea behind this correlation matrix. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const names = ['Temperature', 'Iced drinks', 'Hot drinks'];
const m = [[1, 0.86, -0.55], [0.86, 1, -0.36], [-0.55, -0.36, 1]];
const size = 70;
for (let i = 0; i < names.length; i++) {
for (let j = 0; j <= i; j++) {
const r = m[i][j], alpha = 0.1 + Math.abs(r) * 0.9;
drawRect(120 + j * size, 20 + i * size, size - 4, size - 4, (r >= 0 ? 'rgba(43,108,176,' : 'rgba(201,60,60,') + alpha + ')');
drawText(120 + j * size + 33, 20 + i * size + 38, r.toFixed(2), 'middle');
}
drawText(110, 20 + i * size + 38, names[i], 'end');
}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 correlation-matrix.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 correlation matrix?
It is a table of correlation values for every pair of measures, usually colored so strong links stand out. It is a quick way to see what is linked to what.
What is a good correlation value?
As a rough guide, above 0.7 or below -0.7 is strong, 0.4 to 0.7 is moderate, and below 0.2 is almost no link. What counts as useful depends on your field.
Why is only half of the matrix shown?
The grid is a mirror image: temperature against iced drinks is the same as iced drinks against temperature. Showing half avoids repeating every number.
Does correlation mean causation?
No. Two things can rise together because a third thing drives both. Weekends raise both footfall and pastry sales, for example.
More relationships
041. Scatter Plot
Example: used car prices against mileage
042. Bubble Chart
Example: ad campaigns compared on cost, conversion and budget
043. Heatmap
Example: gym check-ins by day and hour
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