--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/transform/transform.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+ <title>Transform Transitions</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <style type="text/css">
+
+body {
+ margin: 0;
+}
+
+rect {
+ stroke: #fff;
+ stroke-width: .05px;
+}
+
+ </style>
+ </head>
+ <body>
+ <script type="text/javascript">
+
+var w = 960,
+ h = 500,
+ z = 20,
+ x = w / z,
+ y = h / z;
+
+var svg = d3.select("body").append("svg:svg")
+ .attr("width", w)
+ .attr("height", h);
+
+svg.selectAll("rect")
+ .data(d3.range(x * y))
+ .enter().append("svg:rect")
+ .attr("transform", translate)
+ .attr("width", z)
+ .attr("height", z)
+ .style("fill", d3.scale.linear().domain([0, x * y]).range(["brown", "steelblue"]))
+ .on("mouseover", mouseover);
+
+function translate(d) {
+ return "translate(" + (d % x) * z + "," + Math.floor(d / x) * z + ")";
+}
+
+function mouseover(d) {
+ this.parentNode.appendChild(this);
+ d3.select(this).transition()
+ .duration(750)
+ .attr("transform", "translate(480,480)scale(23)rotate(180)")
+ .transition()
+ .delay(1500)
+ .attr("transform", "translate(240,240)scale(0)rotate(180)")
+ .style("fill-opacity", 0)
+ .remove();
+}
+
+ </script>
+ </body>
+</html>