Dendrogram

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.

Source Code

 1 var width = 960,
 2     height = 2200;
 3 
 4 var cluster = d3.layout.cluster()
 5     .size([height, width - 160]);
 6 
 7 var diagonal = d3.svg.diagonal()
 8     .projection(function(d) { return [d.y, d.x]; });
 9 
10 var vis = d3.select("#chart").append("svg")
11     .attr("width", width)
12     .attr("height", height)
13   .append("g")
14     .attr("transform", "translate(40, 0)");
15 
16 d3.json("../data/flare.json", function(json) {
17   var nodes = cluster.nodes(json);
18 
19   var link = vis.selectAll("path.link")
20       .data(cluster.links(nodes))
21     .enter().append("path")
22       .attr("class", "link")
23       .attr("d", diagonal);
24 
25   var node = vis.selectAll("g.node")
26       .data(nodes)
27     .enter().append("g")
28       .attr("class", "node")
29       .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
30 
31   node.append("circle")
32       .attr("r", 4.5);
33 
34   node.append("text")
35       .attr("dx", function(d) { return d.children ? -8 : 8; })
36       .attr("dy", 3)
37       .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
38       .text(function(d) { return d.name; });
39 });