Home / Distribution / Strip Plot
Strip Plot in HTML, CSS and JavaScript
A strip plot shows every value in each group as a dot along a line, one row per group. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows train delays on five lines over 60 weekdays.
What is a strip plot?
A strip plot shows every value in each group as a dot along a line, one row per group. The dots are spread out a little at random, called jitter, so they do not sit exactly on top of each other.
It is the most honest way to show small and medium data sets, because nothing is hidden or summed up. You see the usual values, the bad days and the gaps all at once.
At a glance
- Best for
- Every value for a few groups, up to about 100 each
- Data you need
- A list of numbers for each group
- Skip it when
- Very large groups. Dots turn into a blur.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a strip plot
- Delays or response times by route
- Scores for each player or class
- Daily sales by store
- Any data where the bad days matter
When to pick another chart
- Box Plot: you want a short summary instead of every point
- Beeswarm Plot: you have one group and want a neater layout
What you get in this template
- One row per train line with 60 jittered dots
- A dark mark for the middle day on each line
- A shaded area for days more than 10 minutes late
- Sort by most late or by name
- Hover any dot to see the day and delay
- A table with middle, average and bad days
How the code works
Here is a short version of the idea behind this strip plot. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const lines = [['Orange', [3.1, 12.4, 1.8, 5.6, 18.2, 2.9]], ['Green', [0.8, 1.2, 0.4, 2.1, 1.0, 0.6]]];
const x = min => 110 + min * 18;
lines.forEach(([name, delays], row) => {
const y = 40 + row * 60;
drawText(100, y + 4, name, 'end');
delays.forEach(d => drawCircle(x(d), y + (Math.random() - 0.5) * 30, 5, '#1f6feb'));
});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 strip-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 strip plot?
A strip plot is a chart that shows every value as a dot along a line, usually with one row per group. It is also called a jitter plot or a one dimensional scatter plot.
What is jitter in a strip plot?
Jitter is a small random nudge across the row, so dots with the same or close values do not hide each other. It carries no meaning of its own.
When should I use a strip plot?
Use it when you have up to about 100 values per group and you want people to see every one, including the unusual ones.
Can I combine a strip plot with a box plot?
Yes, and it is a very good idea. The box sums up the group and the dots show the detail. The box plot template in this collection has a switch for that.
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
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