A dendrogram is a node-link diagram that places leaf nodes of the tree at the same depth. In this example, the classes (leaf nodes) are aligned on the right edge, with the packages (internal nodes) to the left. Data shows the Flare class hierarchy, courtesy Jeff Heer.
Compare to this Cartesian layout.
| {"name": "B-text", | |
| "children": [ | |
| {"name": "Visio", | |
| "children": [ | |
| {"name": "Dream 1-Holy Church and Lady Meed", | |
| "children": [ | |
| {"name": "Prologue" | |
| }, | |
| {"name": "Passus 1" | |
| }, | |
| {"name": "Passus 2" | |
| }, | |
| {"name": "Passus 3" | |
| }, | |
| {"name": "Passus 4" | |
| } | |
| ] | |
| }, | |
| {"name": "Dream 2-Pilgrimage to Truth", | |
| "children": [ | |
| {"name": "Passus 5" | |
| }, | |
| {"name": "Passus 6" | |
| }, | |
| {"name": "Passus 7" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| {"name": "Vitae de Dowel, Dobet, and Dobest", | |
| "children": [ | |
| {"name":"Dowel", | |
| "children": [ | |
| {"name": "Dream 3-Search for Dowel", | |
| "children": [ | |
| {"name": "Passus 8" | |
| }, | |
| {"name": "Passus 9" | |
| }, | |
| {"name": "Passus 10" | |
| }, | |
| {"name": "Inner Dream i", | |
| "children": [ | |
| {"name": "Passus 11"} | |
| ] | |
| }, | |
| {"name": "Passus 12" | |
| } | |
| ] | |
| }, | |
| {"name": "Dream 5-Patience", | |
| "children": [ | |
| {"name": "Passus 13" | |
| }, | |
| {"name": "Passus 14" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| {"name": "Dobet", | |
| "children": [ | |
| {"name": "Dream 6-Charity", | |
| "children": [ | |
| {"name": "Passus 15" | |
| }, | |
| {"name": "Inner Dream ii", | |
| "children": [ | |
| {"name": "Passus 16"} | |
| ] | |
| }, | |
| {"name": "Passus 17" | |
| } | |
| ] | |
| }, | |
| {"name": "Dream 8-Passion", | |
| "children": [ | |
| {"name": "Passus 18"} | |
| ] | |
| } | |
| ] | |
| }, | |
| {"name": "Dobest", | |
| "children": [ | |
| {"name": "Dream 9-The Church", | |
| "children": [ | |
| {"name": "Passus 19"} | |
| ] | |
| }, | |
| {"name": "Dream 10-Apocalypse", | |
| "children": [ | |
| {"name": "Passus 20"} | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>Flare Dendrogram</title> | |
| <style> | |
| .node circle { | |
| fill: #fff; | |
| stroke: steelblue; | |
| stroke-width: 1.5px; | |
| } | |
| .node { | |
| font: 10px sans-serif; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var radius = 960 / 2; | |
| var cluster = d3.layout.cluster() | |
| .size([360, radius - 120]); | |
| var diagonal = d3.svg.diagonal.radial() | |
| .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", radius * 2) | |
| .attr("height", radius * 2) | |
| .append("g") | |
| .attr("transform", "translate(" + radius + "," + radius + ")"); | |
| d3.json("flare.json", function(error, root) { | |
| var nodes = cluster.nodes(root); | |
| var link = svg.selectAll("path.link") | |
| .data(cluster.links(nodes)) | |
| .enter().append("path") | |
| .attr("class", "link") | |
| .attr("d", diagonal); | |
| var node = svg.selectAll("g.node") | |
| .data(nodes) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) | |
| node.append("circle") | |
| .attr("r", 4.5); | |
| node.append("text") | |
| .attr("dy", ".31em") | |
| .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) | |
| .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; }) | |
| .text(function(d) { return d.name; }); | |
| }); | |
| d3.select(self.frameElement).style("height", radius * 2 + "px"); | |
| </script> |
