[76] | 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 | } |
---|