--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/partition/partition-icicle-zoom.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <title>Partition - Icicle</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <script type="text/javascript" src="../../d3.layout.js"></script>
+ <style type="text/css">
+
+rect {
+ stroke: #fff;
+}
+
+ </style>
+ </head>
+ <body>
+ <div id="chart"></div>
+ <script type="text/javascript">
+
+var w = 960,
+ h = 250,
+ x = d3.scale.linear().range([0, w]),
+ y = d3.scale.linear().range([0, h]),
+ color = d3.scale.category20c();
+
+var vis = d3.select("#chart").append("svg:svg")
+ .attr("width", w)
+ .attr("height", h);
+
+var partition = d3.layout.partition()
+ .value(function(d) { return d.size; });
+
+d3.json("../data/flare.json", function(json) {
+ var rect = vis.data([json]).selectAll("rect")
+ .data(partition.nodes)
+ .enter().append("svg:rect")
+ .attr("x", function(d) { return x(d.x); })
+ .attr("y", function(d) { return y(d.y); })
+ .attr("width", function(d) { return x(d.dx); })
+ .attr("height", function(d) { return y(d.dy); })
+ .attr("fill", function(d) { return color((d.children ? d : d.parent).name); })
+ .on("click", click);
+
+ function click(d) {
+ x.domain([d.x, d.x + d.dx]);
+ y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);
+
+ rect.transition()
+ .duration(750)
+ .attr("x", function(d) { return x(d.x); })
+ .attr("y", function(d) { return y(d.y); })
+ .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
+ .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
+ }
+});
+
+ </script>
+ </body>
+</html>