Home / Distribution / Cumulative Distribution Chart
Cumulative Distribution Chart in HTML, CSS and JavaScript
A cumulative distribution chart, often called an ECDF, shows what share of values are at or below each point. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows page load times for three versions of a website.
What is a cumulative distribution chart?
A cumulative distribution chart, often called an ECDF, shows what share of values are at or below each point. The line starts at 0% and climbs to 100% as it counts every value from smallest to largest.
It answers questions like: what share of visits loaded within 2.5 seconds? Just find 2.5 on the bottom and read the height of each line. The further left a line climbs, the faster that version is.
At a glance
- Best for
- Reading what share is under a limit
- Data you need
- A list of numbers for each group
- Skip it when
- Audiences who have never seen one. Explain how to read it.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a cumulative distribution chart
- Page speed and response times
- Delivery or wait times against a promise
- Test scores against a pass mark
- Comparing before and after a change
When to pick another chart
- Histogram: you want to see where values bunch up
- Density Plot: you want the shape rather than the running share
What you get in this template
- Step lines built from the sorted data in plain JavaScript
- A dashed line for the 2.5 second target
- A crosshair that reads the share for every version at any time
- Hide a version from the key
- Lines reveal from left to right on load
- Arrow key support and a data table
How the code works
Here is a short version of the idea behind this cumulative distribution chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const times = [1.2, 1.6, 1.4, 2.1, 1.8, 2.6, 1.5, 3.2, 1.9, 1.3];
const s = times.slice().sort((a, b) => a - b);
const x = t => 40 + t / 4 * 540, y = p => 280 - p * 260;
let d = 'M' + x(0) + ',' + y(0);
s.forEach((t, i) => { d += 'H' + x(t) + 'V' + y((i + 1) / s.length); });
make('path', { d: d + 'H' + x(4), fill: 'none', stroke: '#16a34a', 'stroke-width': 3 });
drawLine(x(2.5), y(0), x(2.5), y(1), '#181d2b', 1.5, '6 4');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 ecdf-chart.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 an ECDF chart?
ECDF stands for empirical cumulative distribution function. It is a chart that shows, for every value, what share of the data is at or below it.
How do you read an ECDF?
Pick a value on the bottom axis and go up to the line. The height is the share of values at or below that point. For example, 96% of visits loaded within 2.5 seconds.
Why use an ECDF instead of a histogram?
An ECDF has no bins to choose, shows every value, and makes it easy to read percentiles and compare groups against a target.
How do I find the median on an ECDF?
Go across from 50% on the side axis to the line, then down to the bottom axis. That value is the median.
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
035. Ridgeline Plot
Example: daily high temperatures for each month of the year
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