--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/hello-world/hello-data-nested-key.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,75 @@
+<!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;
+ text-align: center;
+ width: 30px;
+ height: 30px;
+}
+
+ </style>
+ </head>
+ <body>
+ Your lucky numbers are:<br>
+ <table id="table"></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() {
+ var t = d3.select("#table")
+ .selectAll("tr")
+ .data(data);
+
+ t.enter().append("tr")
+ .selectAll("td")
+ .data(function(d) { return d; })
+ .enter().append("td")
+ .style("background-color", function(d) { return "hsl(" + d + ",100%,50%)"; })
+ .text(function(d) { return d; });
+
+ t.selectAll("td")
+ .data(function(d) { return d; })
+ .style("background-color", function(d) { return "hsl(" + d + ",100%,50%)"; })
+ .text(function(d) { return d; });
+}
+
+function refresh() {
+ for (var i = 0; i < 10; i++) {
+ for (var j = 0; j < 10; j++) {
+ data[i][j] = (data[i][j] + 1) % 360;
+ }
+ }
+ transform();
+}
+
+window.addEventListener("keypress", refresh, false);
+
+ </script>
+ </body>
+</html>