Home / Relationships / Connected Scatter Plot
Connected Scatter Plot in HTML, CSS and JavaScript
A connected scatter plot is a scatter plot where the dots are joined in time order. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows monthly bike share trips against average temperature.
What is a connected scatter plot?
A connected scatter plot is a scatter plot where the dots are joined in time order. Each dot is one moment, placed by two measures, and the line shows the path from one moment to the next.
It shows how two things moved together over time. In this example, trips climb with temperature through spring, dip below the trend during the summer holidays, then come back down in autumn.
At a glance
- Best for
- Two measures that change together over time
- Data you need
- Two numbers for each point in time
- Skip it when
- Audiences new to charts. Label the path clearly.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a connected scatter plot
- Sales against price month by month
- Trips or visitors against temperature
- Two economic measures over the years
- Speed against distance during a race
When to pick another chart
- Multi Line Chart: you want both measures on a simple time axis
- Scatter Plot: the order of the points does not matter
What you get in this template
- Twelve months joined by arrows so the order is clear
- Month names beside every dot
- A dashed trend line to compare each month against
- July and August marked in a second color
- Tooltips that say how far above or below the trend each month was
- Arrow key support and a data table
How the code works
Here is a short version of the idea behind this connected scatter plot. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const temp = [3, 9, 17, 24, 19, 8], trips = [27, 44, 74, 88, 84, 43];
const names = ['Jan', 'Mar', 'May', 'Jul', 'Sep', 'Nov'];
const x = t => 40 + t / 26 * 540, y = n => 280 - (n - 20) / 80 * 260;
const pts = temp.map((t, i) => [x(t), y(trips[i])]);
make('path', { d: 'M' + pts.map(p => p.join(',')).join('L'), fill: 'none', stroke: '#0f8b7d', 'stroke-width': 2 });
pts.forEach((p, i) => { drawCircle(p[0], p[1], 6, '#0f8b7d'); drawText(p[0] + 10, p[1] + 4, names[i]); });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 connected-scatter-plot.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 connected scatter plot?
It is a scatter plot with the points joined in time order, so you can see how two measures changed together from one period to the next.
How do you read a connected scatter plot?
Follow the line from the first point to the last. Moving right means the bottom measure grew, moving up means the side measure grew.
Why add arrows to the line?
Without arrows, readers may not know which end is the start. Arrows and labels make the direction of time obvious.
When is a connected scatter plot better than two line charts?
When the link between the two measures is the story. Two line charts show each measure over time, but make it harder to see how they move together.
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
044. Correlation Matrix
Example: what drives daily sales at a cafe
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