Permalink
Browse files

Add sunburst example.

Also, upgrade to 1.7.0.
  • Loading branch information...
1 parent 4e05fa6 commit 120d43c4b13742f49147509883606f573fca70c0 @mbostock mbostock committed Mar 13, 2011
View
@@ -44,7 +44,8 @@ EX_FILES = \
../ex/stream_layers.js \
../ex/stack.js \
../ex/voronoi.css \
- ../ex/voronoi.js
+ ../ex/voronoi.js \
+ ../ex/sunburst.js
INCLUDE_FILES = \
cartogram.js \
@@ -58,7 +59,8 @@ INCLUDE_FILES = \
stream.js \
stream_layers.js \
stack.js \
- voronoi.js
+ voronoi.js \
+ sunburst.js
.PHONY all: $(SRC_FILES) $(EX_FILES) $(INCLUDE_FILES)
@@ -144,7 +146,7 @@ $(SRC_FILES):
../ex/flare.json:
@rm -rf $@
- git cat-file blob master:examples/treemap/flare.json > $@
+ git cat-file blob master:data/flare.json > $@
../ex/splom.js splom.js:
@rm -rf $@
@@ -185,7 +187,7 @@ $(SRC_FILES):
../ex/button.css:
@rm -rf $@
- git cat-file blob master:examples/stream/button.css > $@
+ git cat-file blob master:examples/button.css > $@
../ex/voronoi.css:
@rm -rf $@
@@ -194,3 +196,7 @@ $(SRC_FILES):
../ex/voronoi.js voronoi.js:
@rm -rf $@
git cat-file blob master:examples/voronoi/voronoi.js > $@
+
+../ex/sunburst.js sunburst.js:
+ @rm -rf $@
+ git cat-file blob master:examples/partition/partition-sunburst.js > $@
View
@@ -0,0 +1,75 @@
+var w = 960,
+ h = 700,
+ r = Math.min(w, h) / 2,
+ color = d3.scale.category20c();
+
+var vis = d3.select("#chart").append("svg:svg")
+ .attr("width", w)
+ .attr("height", h)
+ .append("svg:g")
+ .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
+
+var partition = d3.layout.partition()
+ .sort(null)
+ .size([2 * Math.PI, r * r])
+ .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
+ .value(function(d) { return 1; });
+
+var arc = d3.svg.arc()
+ .startAngle(function(d) { return d.x; })
+ .endAngle(function(d) { return d.x + d.dx; })
+ .innerRadius(function(d) { return Math.sqrt(d.y); })
+ .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
+
+d3.json("flare.json", function(json) {
+ vis.data(d3.entries(json)).selectAll("path")
+ .data(partition)
+ .enter().append("svg:path")
+ .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
+ .attr("d", arc)
+ .attr("stroke", "#fff")
+ .attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); })
+ .attr("fill-rule", "evenodd");
+
+ d3.select("#size").on("click", function() {
+ vis.selectAll("path")
+ .data(repartition(function(d) { return d.value; }))
+ .transition()
+ .duration(1500)
+ .attrTween("d", arcTween);
+
+ d3.select("#size").classed("active", true);
+ d3.select("#count").classed("active", false);
+ });
+
+ d3.select("#count").on("click", function() {
+ vis.selectAll("path")
+ .data(repartition(function(d) { return 1; }))
+ .transition()
+ .duration(1500)
+ .attrTween("d", arcTween);
+
+ d3.select("#size").classed("active", false);
+ d3.select("#count").classed("active", true);
+ });
+});
+
+// Compute a new partition, stashing the old value for transition.
+function repartition(value) {
+ return function(d) {
+ var olds = partition(d),
+ news = partition.value(value)(d);
+ news.forEach(function(d, i) {
+ d.prev = olds[i];
+ });
+ return news;
+ };
+}
+
+// Interpolate the arcs in data space.
+function arcTween(a) {
+ var i = d3.interpolate({x: a.prev.x, dx: a.prev.dx}, a);
+ return function(t) {
+ return arc(i(t));
+ };
+}
View
@@ -4,7 +4,7 @@ var w = 960,
var treemap = d3.layout.treemap()
.size([w, h])
- .children(function(d) { return typeof d.value == "object" && d3.entries(d.value); })
+ .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
.value(function(d) { return d.value; });
var div = d3.select("#chart").append("div")
View
@@ -3,7 +3,7 @@
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>d3.js{% if page.title %} ~ {{ page.title }}{% endif %}</title>
- <script type="text/javascript" src="../d3.js?1.6.0"></script>
+ <script type="text/javascript" src="../d3.js?1.7.0"></script>
<style type="text/css">
@import url("../style.css?1.6.0");
View
@@ -3,7 +3,7 @@
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>d3.js{% if page.title %} ~ {{ page.title }}{% endif %}</title>
- <script type="text/javascript" src="d3.js?1.6.0"></script>
+ <script type="text/javascript" src="d3.js?1.7.0"></script>
<style type="text/css">
@import url("style.css?1.6.0");
View
@@ -3,7 +3,7 @@
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>d3.js{% if page.title %} ~ {{ page.title }}{% endif %}</title>
- <script type="text/javascript" src="../d3.js?1.6.0"></script>
+ <script type="text/javascript" src="../d3.js?1.7.0"></script>
<style type="text/css">
@import url("../style.css?1.6.0");
View
@@ -3,7 +3,7 @@
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>d3.js{% if page.title %} ~ {{ page.title }}{% endif %}</title>
- <script type="text/javascript" src="../d3.js?1.6.0"></script>
+ <script type="text/javascript" src="../d3.js?1.7.0"></script>
<style type="text/css">
@import url("../style.css?1.6.0");
View
Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 120d43c

Please sign in to comment.