Skip to content

Commit f028aa0

Browse files
committed
Add bubble chart example.
1 parent de3d1c1 commit f028aa0

4 files changed

Lines changed: 79 additions & 0 deletions

File tree

examples/bubble/bubble.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
circle {
2+
stroke: #fff;
3+
stroke-width: 1.5px;
4+
}
5+
6+
text {
7+
font: 10px sans-serif;
8+
}

examples/bubble/bubble.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5+
<title>Bubble Chart</title>
6+
<script type="text/javascript" src="../../d3.js"></script>
7+
<script type="text/javascript" src="../../d3.layout.js"></script>
8+
<link type="text/css" rel="stylesheet" href="bubble.css"/>
9+
</head>
10+
<body>
11+
<div id="chart"></div>
12+
<script type="text/javascript" src="bubble.js"></script>
13+
</body>
14+
</html>

examples/bubble/bubble.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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+
}

examples/bubble/flare.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../data/flare.json

0 commit comments

Comments
 (0)