equal
deleted
inserted
replaced
|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <title>Hello, data!</title> |
|
5 <script type="text/javascript" src="../../d3.js"></script> |
|
6 </head> |
|
7 <body> |
|
8 Your lucky numbers are:<br> |
|
9 <span></span> |
|
10 <span></span> |
|
11 <span></span> |
|
12 <span></span> |
|
13 <span></span> |
|
14 <script type="text/javascript"> |
|
15 |
|
16 var data = [4, 8, 15, 16, 23, 42]; |
|
17 |
|
18 d3.selectAll("span") |
|
19 .data(data) |
|
20 .append("svg:svg") |
|
21 .attr("width", 100) |
|
22 .attr("height", 100) |
|
23 .append("svg:text") |
|
24 .attr("x", "50%") |
|
25 .attr("y", "50%") |
|
26 .attr("dy", ".35em") |
|
27 .attr("text-anchor", "middle") |
|
28 .attr("fill", "white") |
|
29 .attr("stroke", "black") |
|
30 .attr("stroke-width", 1.5) |
|
31 .style("font", "36pt Comic Sans MS") |
|
32 .style("text-shadow", "3px 3px 3px rgba(0,0,0,.4)") |
|
33 .text(function(d) { return d; }); |
|
34 |
|
35 function refresh() { |
|
36 for (var i = 0; i < data.length; i++) data[i] = (data[i] + 1) % 100; |
|
37 d3.selectAll("text") |
|
38 .data(data) |
|
39 .text(function(d) { return d; }); |
|
40 } |
|
41 |
|
42 window.addEventListener("keypress", refresh, false); |
|
43 |
|
44 </script> |
|
45 </body> |
|
46 </html> |