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("../data/flare.json", function(json) {
15   var node = vis.selectAll("g.node")
16       .data(bubble.nodes(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.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.packageName); });
28 
29   node.append("svg:text")
30       .attr("text-anchor", "middle")
31       .attr("dy", ".3em")
32       .text(function(d) { return d.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     if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
41     else classes.push({packageName: name, className: node.name, value: node.size});
42   }
43 
44   recurse(null, root);
45   return {children: classes};
46 }