--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/hello-world/hello-transition.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hello, transition!</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <style type="text/css">
+
+body {
+ font: 14px Helvetica Neue;
+ text-rendering: optimizeLegibility;
+ margin: 1em;
+}
+
+div {
+ font-size: 42px;
+ margin-top: .5em;
+ background-color: steelblue;
+ color: white;
+ text-align: right;
+}
+
+ </style>
+ </head>
+ <body>
+ Your lucky number is:<br>
+ <div></div>
+ <script type="text/javascript">
+
+transform();
+
+function transform() {
+ d3.select("div")
+ .style("width", "0%")
+ .style("background-color", "steelblue")
+ .text("hello\u00a0")
+ .transition()
+ .ease("bounce")
+ .duration(2000)
+ .style("width", "100%")
+ .style("background-color", "brown");
+}
+
+window.addEventListener("keypress", transform, false);
+
+ </script>
+ </body>
+</html>