--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/partition/partition-sunburst-zoom.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <title>Partition - Sunburst</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <script type="text/javascript" src="../../d3.layout.js"></script>
+ <style type="text/css">
+
+path {
+ stroke: #fff;
+ fill-rule: evenodd;
+}
+
+ </style>
+ </head>
+ <body>
+ <div id="chart"></div>
+ <script type="text/javascript">
+
+var w = 960,
+ h = 700,
+ r = Math.min(w, h) / 2,
+ x = d3.scale.linear().range([0, 2 * Math.PI]),
+ y = d3.scale.sqrt().range([0, r]),
+ 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()
+ .value(function(d) { return d.size; });
+
+var arc = d3.svg.arc()
+ .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
+ .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
+ .innerRadius(function(d) { return Math.max(0, y(d.y)); })
+ .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
+
+d3.json("../data/flare.json", function(json) {
+ var path = vis.data([json]).selectAll("path")
+ .data(partition.nodes)
+ .enter().append("svg:path")
+ .attr("d", arc)
+ .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
+ .on("click", click);
+
+ function click(d) {
+ path.transition()
+ .duration(750)
+ .attrTween("d", arcTween(d));
+ }
+});
+
+// Interpolate the scales!
+function arcTween(d) {
+ var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
+ yd = d3.interpolate(y.domain(), [d.y, 1]),
+ yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]);
+ return function(d, i) {
+ return i
+ ? function(t) { return arc(d); }
+ : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
+ };
+}
+
+ </script>
+ </body>
+</html>