|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <title>Hello, data!</title> |
|
5 <script type="text/javascript" src="../../d3.js"></script> |
|
6 <style type="text/css"> |
|
7 |
|
8 body, td { |
|
9 font: 14px Helvetica Neue; |
|
10 text-rendering: optimizeLegibility; |
|
11 margin: 1em; |
|
12 } |
|
13 |
|
14 table { |
|
15 border-collapse: collapse; |
|
16 margin-top: .5em; |
|
17 } |
|
18 |
|
19 td { |
|
20 border: solid 1px #fff; |
|
21 text-align: center; |
|
22 width: 30px; |
|
23 height: 30px; |
|
24 } |
|
25 |
|
26 </style> |
|
27 </head> |
|
28 <body> |
|
29 Your lucky numbers are:<br> |
|
30 <table id="table"></table> |
|
31 <script type="text/javascript"> |
|
32 |
|
33 var data = []; |
|
34 |
|
35 for (var i = 0; i < 10; i++) { |
|
36 for (var j = 0, a = []; j < 10; j++) { |
|
37 a.push(~~(Math.random() * 100)); |
|
38 } |
|
39 data.push(a); |
|
40 } |
|
41 |
|
42 transform(); |
|
43 |
|
44 function transform() { |
|
45 var t = d3.select("#table") |
|
46 .selectAll("tr") |
|
47 .data(data); |
|
48 |
|
49 t.enter().append("tr") |
|
50 .selectAll("td") |
|
51 .data(function(d) { return d; }) |
|
52 .enter().append("td") |
|
53 .style("background-color", function(d) { return "hsl(" + d + ",100%,50%)"; }) |
|
54 .text(function(d) { return d; }); |
|
55 |
|
56 t.selectAll("td") |
|
57 .data(function(d) { return d; }) |
|
58 .style("background-color", function(d) { return "hsl(" + d + ",100%,50%)"; }) |
|
59 .text(function(d) { return d; }); |
|
60 } |
|
61 |
|
62 function refresh() { |
|
63 for (var i = 0; i < 10; i++) { |
|
64 for (var j = 0; j < 10; j++) { |
|
65 data[i][j] = (data[i][j] + 1) % 360; |
|
66 } |
|
67 } |
|
68 transform(); |
|
69 } |
|
70 |
|
71 window.addEventListener("keypress", refresh, false); |
|
72 |
|
73 </script> |
|
74 </body> |
|
75 </html> |