Mercurial Mercurial > periplus / file revision
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
toolkit/javascript/d3/examples/hello-world/hello-data-nested.html
author Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
Thu, 10 Apr 2014 14:20:23 +0200
changeset 47 c0b4a8b5a012
permissions -rw-r--r--
add toolkit.html + démonstrateurs

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, data!</title>
    <script type="text/javascript" src="../../d3.js"></script>
    <style type="text/css">

body, td {
  font: 14px Helvetica Neue;
  text-rendering: optimizeLegibility;
  margin: 1em;
}

table {
  border-collapse: collapse;
  margin-top: .5em;
}

td {
  border: solid 1px #fff;
  color: #ccc;
  text-align: center;
  width: 30px;
  height: 30px;
}

    </style>
  </head>
  <body>
    Your lucky numbers are:<br>
    <table>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </table>
    <script type="text/javascript">

var data = [];

for (var i = 0; i < 10; i++) {
  for (var j = 0, a = []; j < 10; j++) {
    a.push(~~(Math.random() * 100));
  }
  data.push(a);
}

transform();

function transform() {
  d3.selectAll("tr")
      .data(data)
    .selectAll("td")
      .data(function(d) { return d; })
      .style("background-color", function(d) { return "hsl(0,50%," + d + "%)"; })
      .text(function(d) { return d; });
}

function refresh() {
  for (var i = 0; i < data.length; i++) {
    var z = data[i], d = z.shift();
    z.push(~~(Math.random() * 100));
  }
  transform();
}

window.addEventListener("keypress", refresh, false);

    </script>
  </body>
</html>
periplus