D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
altocumulus
Full window
Github gist
Vertical "Elbow" Dendrogram
<!DOCTYPE html> <meta charset="utf-8"> <style> .link { fill: none; stroke: #ccc; stroke-width: 1; } </style> <body> <script src="https://d3js.org/d3.v5.js"></script> <script> const width = 960, height = 400; const cluster = d3.cluster() .size([width - 160, height]); const svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(40,0)"); d3.json("readme.json") .then(json => { const root = d3.hierarchy(json); cluster(root); svg.selectAll(".link") .data(root.links()) .enter().append("path") .attr("class", "link") .attr("d", elbow); }); function elbow(d) { return "M" + d.source.x + "," + d.source.y + "H" + d.target.x + "V" + d.target.y; } </script>
https://d3js.org/d3.v5.js