|
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 color: #ccc; |
|
22 text-align: center; |
|
23 width: 30px; |
|
24 height: 30px; |
|
25 } |
|
26 |
|
27 </style> |
|
28 </head> |
|
29 <body> |
|
30 Your lucky numbers are:<br> |
|
31 <table> |
|
32 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
|
33 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
|
34 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
|
35 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
|
36 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
|
37 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
|
38 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
|
39 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
|
40 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
|
41 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> |
|
42 </table> |
|
43 <script type="text/javascript"> |
|
44 |
|
45 var data = []; |
|
46 |
|
47 for (var i = 0; i < 10; i++) { |
|
48 for (var j = 0, a = []; j < 10; j++) { |
|
49 a.push(~~(Math.random() * 100)); |
|
50 } |
|
51 data.push(a); |
|
52 } |
|
53 |
|
54 transform(); |
|
55 |
|
56 function transform() { |
|
57 d3.selectAll("tr") |
|
58 .data(data) |
|
59 .selectAll("td") |
|
60 .data(function(d) { return d; }) |
|
61 .style("background-color", function(d) { return "hsl(0,50%," + d + "%)"; }) |
|
62 .text(function(d) { return d; }); |
|
63 } |
|
64 |
|
65 function refresh() { |
|
66 for (var i = 0; i < data.length; i++) { |
|
67 var z = data[i], d = z.shift(); |
|
68 z.push(~~(Math.random() * 100)); |
|
69 } |
|
70 transform(); |
|
71 } |
|
72 |
|
73 window.addEventListener("keypress", refresh, false); |
|
74 |
|
75 </script> |
|
76 </body> |
|
77 </html> |