--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/hello-world/hello-webkit-transition.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hello, data!</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <style type="text/css">
+
+body {
+ font: 14px Helvetica Neue;
+ text-rendering: optimizeLegibility;
+ margin: 1em;
+}
+
+#cells {
+ position: relative;
+ margin-top: .5em;
+ height: 300px;
+ overflow: hidden;
+}
+
+.cell {
+ position: absolute;
+ background: steelblue;
+ color: white;
+ width: 28px;
+ text-align: center;
+ padding-top: 6px;
+ top: 300px;
+ bottom: 0;
+ background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(steelblue));
+ -webkit-transition-property: top, background-color;
+ -webkit-transition-duration: 500ms;
+ -webkit-transition-timing-function: ease, linear;
+}
+
+ </style>
+ </head>
+ <body>
+ Your lucky numbers are:<br>
+ <div id="cells"></div>
+ <script type="text/javascript">
+
+var n = 10;
+
+d3.select("#cells")
+ .selectAll("div")
+ .data(d3.range(n))
+ .enter().append("div")
+ .attr("class", "cell")
+ .style("left", function(i) { return i * 30; });
+
+function transform() {
+ d3.selectAll(".cell")
+ .data(d3.range(n).map(Math.random))
+ .style("top", function(d) { return (1 - d) * 300; })
+ .style("background-color", function(d) { return "rgb(" + ~~(d * 255) + ",50,100)"; })
+ .text(function(d) { return ~~(d * 100); });
+}
+
+window.addEventListener("keypress", transform, false);
+
+ </script>
+ </body>
+</html>