Dendrogram

Data shows the Flare class hierarchy, courtesy Jeff Heer.

Source Code

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