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 <script type="text/javascript"> |
|
10 |
|
11 var i = 0, data = [ |
|
12 {id: i++, value: 4}, |
|
13 {id: i++, value: 8}, |
|
14 {id: i++, value: 15}, |
|
15 {id: i++, value: 16}, |
|
16 {id: i++, value: 23}, |
|
17 {id: i++, value: 42} |
|
18 ]; |
|
19 |
|
20 transform(); |
|
21 |
|
22 function transform() { |
|
23 var t = d3.select("body") |
|
24 .selectAll("span") |
|
25 .data(data, function(d) { return d.id; }); |
|
26 |
|
27 t.enter().append("span") |
|
28 .attr("id", function(d) { return "span-" + d.id; }) |
|
29 .append("svg:svg") |
|
30 .attr("width", 100) |
|
31 .attr("height", 100) |
|
32 .append("svg:text") |
|
33 .attr("x", "50%") |
|
34 .attr("y", "50%") |
|
35 .attr("dy", ".35em") |
|
36 .attr("text-anchor", "middle") |
|
37 .attr("fill", "white") |
|
38 .attr("stroke", "black") |
|
39 .attr("stroke-width", 1.5) |
|
40 .style("font", "36pt Comic Sans MS") |
|
41 .style("text-shadow", "3px 3px 3px rgba(0,0,0,.4)") |
|
42 .text(function(d) { return d.value; }); |
|
43 |
|
44 t.select("text") |
|
45 .text(function(d) { return d.value; }); |
|
46 |
|
47 t.exit().remove(); |
|
48 } |
|
49 |
|
50 function refresh() { |
|
51 data.shift(); |
|
52 data.push({id: i++ % 7, value: ~~(Math.random() * 100)}); |
|
53 transform(); |
|
54 } |
|
55 |
|
56 window.addEventListener("keypress", refresh, false); |
|
57 |
|
58 </script> |
|
59 </body> |
|
60 </html> |