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