Home / Distribution / Ridgeline Plot
Ridgeline Plot in HTML, CSS and JavaScript
A ridgeline plot stacks several density curves on top of each other, each one slightly overlapping the next, like a row of hills. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows daily high temperatures for each month of the year.
What is a ridgeline plot?
A ridgeline plot stacks several density curves on top of each other, each one slightly overlapping the next, like a row of hills. Each ridge shows how values were spread in one group.
It is perfect for groups that follow an order, like months of the year. You can watch the whole shape slide warmer in summer and cooler in winter in one glance.
At a glance
- Best for
- Many ordered groups, like months or years
- Data you need
- A list of numbers for each group
- Skip it when
- Groups with no natural order.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a ridgeline plot
- Temperatures or rainfall by month
- Prices or scores year by year
- Response times by hour of the day
- Ages or incomes across several surveys
When to pick another chart
- Violin Plot: you have only a few groups
- Horizon Chart: you want to see each day in order, not the spread
What you get in this template
- Twelve ridges drawn from density estimates in plain JavaScript
- Each ridge colored by its middle temperature, from blue to red
- Ridges overlap so the chart stays compact
- Tooltips with the middle high, most days and the full range
- Short month names on phones
- Keyboard support and a data table
How the code works
Here is a short version of the idea behind this ridgeline plot. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const months = [[8, 9, 11, 7, 10, 9], [15, 17, 16, 18, 14, 16], [26, 28, 27, 30, 25, 29]];
const colors = ['#4575b4', '#fee090', '#d73027'];
const bw = 1.5, step = 60;
months.forEach((temps, i) => {
const base = 80 + i * step;
const pts = [];
for (let t = 0; t <= 36; t += 0.5) {
const d = temps.reduce((a, v) => a + Math.exp(-0.5 * ((t - v) / bw) ** 2), 0) / temps.length;
pts.push((40 + t * 15) + ',' + (base - d * 110));
}
make('path', { d: 'M40,' + base + 'L' + pts.join('L') + 'L580,' + base + 'Z', fill: colors[i], stroke: '#fff' });
});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 ridgeline-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 ridgeline plot?
A ridgeline plot is a set of density curves stacked with a small overlap, one for each group, so you can compare how values are spread across many groups.
Why is it also called a joy plot?
The name came from the album cover of Joy Division, which shows stacked lines in the same style. Ridgeline plot is the name most people use now.
How many groups can a ridgeline plot show?
It works well with 5 to 20 groups. Twelve months, like in this template, is a classic use.
Should the ridges overlap?
A little overlap keeps the chart compact and makes the shapes easier to compare. Too much and the peaks hide the ridges behind them.
More distribution
031. Histogram
Example: delivery times for 600 pizza orders
032. Box Plot
Example: monthly rent for flats in six neighborhoods
033. Violin Plot
Example: coffee order waits at four cafes
034. Density Plot
Example: sunflower heights with and without plant feed
036. Beeswarm Plot
Example: finish times for 300 marathon runners
037. Strip Plot
Example: train delays on five lines over 60 weekdays
038. Population Pyramid
Example: the age of a town in 2006 and 2026
039. Error Bar Chart
Example: battery life test results for five phones