--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/hello-world/hello-data-key.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hello, data!</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ </head>
+ <body>
+ Your lucky numbers are:<br>
+ <script type="text/javascript">
+
+var i = 0, data = [
+ {id: i++, value: 4},
+ {id: i++, value: 8},
+ {id: i++, value: 15},
+ {id: i++, value: 16},
+ {id: i++, value: 23},
+ {id: i++, value: 42}
+];
+
+transform();
+
+function transform() {
+ var t = d3.select("body")
+ .selectAll("span")
+ .data(data, function(d) { return d.id; });
+
+ t.enter().append("span")
+ .attr("id", function(d) { return "span-" + d.id; })
+ .append("svg:svg")
+ .attr("width", 100)
+ .attr("height", 100)
+ .append("svg:text")
+ .attr("x", "50%")
+ .attr("y", "50%")
+ .attr("dy", ".35em")
+ .attr("text-anchor", "middle")
+ .attr("fill", "white")
+ .attr("stroke", "black")
+ .attr("stroke-width", 1.5)
+ .style("font", "36pt Comic Sans MS")
+ .style("text-shadow", "3px 3px 3px rgba(0,0,0,.4)")
+ .text(function(d) { return d.value; });
+
+ t.select("text")
+ .text(function(d) { return d.value; });
+
+ t.exit().remove();
+}
+
+function refresh() {
+ data.shift();
+ data.push({id: i++ % 7, value: ~~(Math.random() * 100)});
+ transform();
+}
+
+window.addEventListener("keypress", refresh, false);
+
+ </script>
+ </body>
+</html>