Bubble Chart

Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

Source Code

 1 var r = 960,
 2     format = d3.format(",d"),
 3     fill = d3.scale.category20c();
 4 
 5 var bubble = d3.layout.pack()
 6     .sort(null)
 7     .size([r, r]);
 8 
 9 var vis = d3.select("#chart").append("svg:svg")
10     .attr("width", r)
11     .attr("height", r)
12     .attr("class", "bubble");
13 
14 d3.json("flare.json", function(json) {
15   var node = vis.selectAll("g.node")
16       .data(bubble(classes(json))
17       .filter(function(d) { return !d.children; }))
18     .enter().append("svg:g")
19       .attr("class", "node")
20       .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
21 
22   node.append("svg:title")
23       .text(function(d) { return d.data.className + ": " + format(d.value); });
24 
25   node.append("svg:circle")
26       .attr("r", function(d) { return d.r; })
27       .style("fill", function(d) { return fill(d.data.packageName); });
28 
29   node.append("svg:text")
30       .attr("text-anchor", "middle")
31       .attr("dy", ".3em")
32       .text(function(d) { return d.data.className.substring(0, d.r / 3); });
33 });
34 
35 // Returns a flattened hierarchy containing all leaf nodes under the root.
36 function classes(root) {
37   var classes = [];
38 
39   function recurse(name, node) {
40     for (var childName in node) {
41       var child = node[childName];
42       if (isNaN(child)) {
43         recurse(childName, child);
44       } else {
45         classes.push({
46           className: childName,
47           packageName: name,
48           value: child
49         });
50       }
51     }
52   }
53 
54   recurse(null, root);
55   return {children: classes};
56 }
Copyright © 2011 Mike Bostock
Fork me on GitHub