| Line | |
|---|
| 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> |
|---|
Note: See
TracBrowser
for help on using the repository browser.
