Home / Distribution / Violin Plot
Violin Plot in HTML, CSS and JavaScript
A violin plot shows the full shape of a set of numbers as a smooth, mirrored outline. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows coffee order waits at four cafes.
What is a violin plot?
A violin plot shows the full shape of a set of numbers as a smooth, mirrored outline. The wider the shape at a value, the more data points sit there. Most violin plots also hold a small box plot inside.
It shows things a box plot hides, such as two peaks. In this example, one cafe has quick waits and slow waits but very few in between, which a box plot would miss completely.
At a glance
- Best for
- Comparing the shape of several groups
- Data you need
- A list of numbers for each group, 50 or more
- Skip it when
- Very small groups. Show the points instead.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a violin plot
- Wait or service times by location
- Prices or ratings by category
- Results from different test groups
- Any data that might have two peaks
When to pick another chart
- Box Plot: you want a simpler summary most people know
- Ridgeline Plot: you have many groups, like months of the year
What you get in this template
- Smooth shapes made with a density estimate written in plain JavaScript
- All shapes use the same scale so widths compare fairly
- A dark bar for the middle half and a white dot for the median
- Shapes open out from the center on load
- Tooltips with the median and middle half
- Keyboard support and a table of key numbers
How the code works
Here is a short version of the idea behind this violin plot. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const waits = [2.8, 3.1, 3.4, 2.6, 7.9, 8.4, 3.0, 8.8, 7.2, 3.3];
const bw = 0.6, cx = 200;
const density = t => waits.reduce((a, v) => a + Math.exp(-0.5 * ((t - v) / bw) ** 2), 0);
const ts = Array.from({ length: 60 }, (v, i) => i * 12 / 59);
const max = Math.max(...ts.map(density));
const y = t => 280 - t / 12 * 260;
const right = ts.map(t => (cx + density(t) / max * 60) + ',' + y(t));
const left = ts.map(t => (cx - density(t) / max * 60) + ',' + y(t)).reverse();
make('path', { d: 'M' + right.join('L') + 'L' + left.join('L') + 'Z', fill: '#6f4e37' });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 violin-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 violin plot?
A violin plot is a chart that shows how values are spread using a smooth, mirrored shape. Wide parts mean many values, thin parts mean few.
What is the difference between a violin plot and a box plot?
A box plot shows five summary numbers. A violin plot shows the full shape of the data, so it can reveal two peaks or gaps that a box plot hides.
How is the shape of a violin plot made?
It uses a kernel density estimate. Each value adds a small bell curve, and all the curves are added together into one smooth outline.
When should I avoid violin plots?
Avoid them with very little data, because the smooth shape can suggest patterns that are not really there. Show the individual points instead.
More distribution
031. Histogram
Example: delivery times for 600 pizza orders
032. Box Plot
Example: monthly rent for flats in six neighborhoods
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
039. Error Bar Chart
Example: battery life test results for five phones