Home / Flow and Network / Dendrogram
Dendrogram in HTML, CSS and JavaScript
A dendrogram is a tree that shows how items group together by how similar they are. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows grocery items that shoppers buy together.
What is a dendrogram?
A dendrogram is a tree that shows how items group together by how similar they are. Items that join close to the start are very alike, and items that only join near the end have little in common.
Drawing a line across the tree splits the items into groups. Cut early and you get many small groups, cut late and you get a few big ones. It is the usual way to show the result of a clustering analysis.
At a glance
- Best for
- Showing groups found by similarity
- Data you need
- The result of a clustering: which items join and at what distance
- Skip it when
- Structures that are not based on similarity, like an org chart.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a dendrogram
- Products bought together
- Customers with similar habits
- Songs, films or books with similar features
- Survey answers or genes that behave alike
When to pick another chart
- Tree Diagram: you have a fixed hierarchy, like a sitemap
- Correlation Matrix: you want to see every pair of items
What you get in this template
- A cluster tree drawn with right angled lines
- A cut line with three settings: 2, 4 or 8 groups
- Groups below the cut line get their own color
- Hover a join point to see which items it holds
- The tree draws from left to right on load
- A table that lists the items in each group
How the code works
Here is a short version of the idea behind this dendrogram. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const tree = { h: 0.6, k: [{ h: 0.2, k: [{ n: 'Bread' }, { n: 'Butter' }] }, { h: 0.15, k: [{ n: 'Pasta' }, { n: 'Sauce' }] }] };
const x = h => 500 - h * 600;
let row = 0;
(function draw(n) {
if (!n.k) { n.y = 40 + row++ * 50; n.x = x(0); drawText(n.x + 8, n.y + 4, n.n); return; }
n.k.forEach(draw);
n.y = (n.k[0].y + n.k[n.k.length - 1].y) / 2; n.x = x(n.h);
n.k.forEach(c => make('path', { d: 'M' + c.x + ',' + c.y + 'H' + n.x + 'V' + n.y, fill: 'none', stroke: '#171c26', 'stroke-width': 2 }));
})(tree);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 dendrogram.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 dendrogram?
A dendrogram is a tree diagram that shows how items were grouped by similarity. The point where two branches join shows how different they are.
How do you read a dendrogram?
Items that join near zero are very similar. Follow the branches: the further along two items join, the less they have in common.
How do I choose how many groups to use?
Look for a place where branches join far apart, leaving a big gap. Cutting in that gap gives natural groups. In the example, a cut at 0.5 gives four clear groups.
What is hierarchical clustering?
It is a method that starts with every item on its own and keeps joining the two closest groups until everything is one group. A dendrogram shows every step of that process.
More flow and network
051. Sankey Diagram
Example: website visitors from source to landing page to outcome
052. Chord Diagram
Example: customers switching between five phone networks
053. Arc Diagram
Example: characters who share scenes in a novel
054. Network Graph
Example: who runs with whom in a running club
055. Alluvial Diagram
Example: customers changing plans over three years
056. Tree Diagram
Example: a garden centre website map with monthly visits
058. Org Chart
Example: the team structure of a design studio
059. Flowchart
Example: how an online shop handles a return request