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 }