Permalink
Browse files

Add bubble example.

  • Loading branch information...
1 parent 367692e commit 47a07f173d63765681dba35dd2acc4ed08c0ee6e @mbostock mbostock committed Apr 25, 2011
Showing with 163 additions and 0 deletions.
  1. +11 −0 _includes/Makefile
  2. +56 −0 _includes/bubble.js
  3. BIN bubble.png
  4. +8 −0 ex/bubble.css
  5. +56 −0 ex/bubble.js
  6. +21 −0 ex/bubble.markdown
  7. +11 −0 ex/index.markdown
View
@@ -38,6 +38,8 @@ EX_FILES = \
../ex/treemap.css \
../ex/treemap.js \
../ex/miserables.json \
+ ../ex/bubble.js \
+ ../ex/bubble.css \
../ex/pack.js \
../ex/pack.css \
../ex/splom.css \
@@ -79,6 +81,7 @@ INCLUDE_FILES = \
sunburst.js \
bullet.js \
bullets.json \
+ bubble.js \
pack.js \
tree.js
@@ -116,6 +119,14 @@ $(SRC_FILES):
@rm -rf $@
git cat-file blob master:examples/pack/pack.css > $@
+../ex/bubble.js bubble.js:
+ @rm -rf $@
+ git cat-file blob master:examples/bubble/bubble.js > $@
+
+../ex/bubble.css:
+ @rm -rf $@
+ git cat-file blob master:examples/bubble/bubble.css > $@
+
../ex/cluster.js cluster.js:
@rm -rf $@
git cat-file blob master:examples/cluster/cluster.js > $@
View
@@ -0,0 +1,56 @@
+var r = 960,
+ format = d3.format(",d"),
+ fill = d3.scale.category20c();
+
+var bubble = d3.layout.pack()
+ .sort(null)
+ .size([r, r]);
+
+var vis = d3.select("#chart").append("svg:svg")
+ .attr("width", r)
+ .attr("height", r)
+ .attr("class", "bubble");
+
+d3.json("flare.json", function(json) {
+ var node = vis.selectAll("g.node")
+ .data(bubble(classes(json))
+ .filter(function(d) { return !d.children; }))
+ .enter().append("svg:g")
+ .attr("class", "node")
+ .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+
+ node.append("svg:title")
+ .text(function(d) { return d.data.className + ": " + format(d.value); });
+
+ node.append("svg:circle")
+ .attr("r", function(d) { return d.r; })
+ .style("fill", function(d) { return fill(d.data.packageName); });
+
+ node.append("svg:text")
+ .attr("text-anchor", "middle")
+ .attr("dy", ".3em")
+ .text(function(d) { return d.data.className.substring(0, d.r / 3); });
+});
+
+// Returns a flattened hierarchy containing all leaf nodes under the root.
+function classes(root) {
+ var classes = [];
+
+ function recurse(name, node) {
+ for (var childName in node) {
+ var child = node[childName];
+ if (isNaN(child)) {
+ recurse(childName, child);
+ } else {
+ classes.push({
+ className: childName,
+ packageName: name,
+ value: child
+ });
+ }
+ }
+ }
+
+ recurse(null, root);
+ return {children: classes};
+}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,8 @@
+circle {
+ stroke: #fff;
+ stroke-width: 1.5px;
+}
+
+text {
+ font: 10px sans-serif;
+}
View
@@ -0,0 +1,56 @@
+var r = 960,
+ format = d3.format(",d"),
+ fill = d3.scale.category20c();
+
+var bubble = d3.layout.pack()
+ .sort(null)
+ .size([r, r]);
+
+var vis = d3.select("#chart").append("svg:svg")
+ .attr("width", r)
+ .attr("height", r)
+ .attr("class", "bubble");
+
+d3.json("flare.json", function(json) {
+ var node = vis.selectAll("g.node")
+ .data(bubble(classes(json))
+ .filter(function(d) { return !d.children; }))
+ .enter().append("svg:g")
+ .attr("class", "node")
+ .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+
+ node.append("svg:title")
+ .text(function(d) { return d.data.className + ": " + format(d.value); });
+
+ node.append("svg:circle")
+ .attr("r", function(d) { return d.r; })
+ .style("fill", function(d) { return fill(d.data.packageName); });
+
+ node.append("svg:text")
+ .attr("text-anchor", "middle")
+ .attr("dy", ".3em")
+ .text(function(d) { return d.data.className.substring(0, d.r / 3); });
+});
+
+// Returns a flattened hierarchy containing all leaf nodes under the root.
+function classes(root) {
+ var classes = [];
+
+ function recurse(name, node) {
+ for (var childName in node) {
+ var child = node[childName];
+ if (isNaN(child)) {
+ recurse(childName, child);
+ } else {
+ classes.push({
+ className: childName,
+ packageName: name,
+ value: child
+ });
+ }
+ }
+ }
+
+ recurse(null, root);
+ return {children: classes};
+}
View
@@ -0,0 +1,21 @@
+---
+layout: ex
+title: Bubble Chart
+---
+
+# Bubble Chart
+
+<div class="gallery" id="chart"> </div>
+<link type="text/css" rel="stylesheet" href="bubble.css"/>
+<script type="text/javascript" src="../d3.layout.js?1.12.0"> </script>
+<script type="text/javascript" src="bubble.js"> </script>
+
+Implementation based on work by [Jeff Heer](http://jheer.org/). Data shows the
+[Flare](http://flare.prefuse.org/) class hierarchy, also courtesy Jeff
+Heer.
+
+### Source Code
+
+{% highlight js linenos %}
+{% include bubble.js %}
+{% endhighlight %}
View
@@ -180,6 +180,17 @@ title: Examples
</div>
<div class="list">
+ <a href="bubble.html">
+ <img src="../bubble.png"/>
+ </a>
+ <h4><a href="bubble.html">Bubble Chart</a></h4>
+
+ <p>Bubble charts encode data in the area of circles. Although less
+ perceptually-accurate than bar charts, they can pack hundreds of values into a
+ small space.</p>
+</div>
+
+<div class="list">
<a href="cluster.html">
<img src="../cluster.png"/>
</a>

0 comments on commit 47a07f1

Please sign in to comment.