--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/hello-world/hello-data-nested.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hello, data!</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <style type="text/css">
+
+body, td {
+ font: 14px Helvetica Neue;
+ text-rendering: optimizeLegibility;
+ margin: 1em;
+}
+
+table {
+ border-collapse: collapse;
+ margin-top: .5em;
+}
+
+td {
+ border: solid 1px #fff;
+ color: #ccc;
+ text-align: center;
+ width: 30px;
+ height: 30px;
+}
+
+ </style>
+ </head>
+ <body>
+ Your lucky numbers are:<br>
+ <table>
+ <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+ <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+ <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+ <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+ <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+ <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+ <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+ <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+ <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+ <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+ </table>
+ <script type="text/javascript">
+
+var data = [];
+
+for (var i = 0; i < 10; i++) {
+ for (var j = 0, a = []; j < 10; j++) {
+ a.push(~~(Math.random() * 100));
+ }
+ data.push(a);
+}
+
+transform();
+
+function transform() {
+ d3.selectAll("tr")
+ .data(data)
+ .selectAll("td")
+ .data(function(d) { return d; })
+ .style("background-color", function(d) { return "hsl(0,50%," + d + "%)"; })
+ .text(function(d) { return d; });
+}
+
+function refresh() {
+ for (var i = 0; i < data.length; i++) {
+ var z = data[i], d = z.shift();
+ z.push(~~(Math.random() * 100));
+ }
+ transform();
+}
+
+window.addEventListener("keypress", refresh, false);
+
+ </script>
+ </body>
+</html>