periplus: toolkit/javascript/d3/examples/hello-world/hello-data-nested-key.html@c0b4a8b5a012


<!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;
  text-align: center;
  width: 30px;
  height: 30px;
}

    </style>
  </head>
  <body>
    Your lucky numbers are:<br>
    <table id="table"></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() {
  var t = d3.select("#table")
    .selectAll("tr")
      .data(data);

  t.enter().append("tr")
    .selectAll("td")
      .data(function(d) { return d; })
    .enter().append("td")
      .style("background-color", function(d) { return "hsl(" + d + ",100%,50%)"; })
      .text(function(d) { return d; });

  t.selectAll("td")
      .data(function(d) { return d; })
      .style("background-color", function(d) { return "hsl(" + d + ",100%,50%)"; })
      .text(function(d) { return d; });
}

function refresh() {
  for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
      data[i][j] = (data[i][j] + 1) % 360;
    }
  }
  transform();
}

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

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

author	Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
	Thu, 10 Apr 2014 14:20:23 +0200
changeset 47	c0b4a8b5a012
permissions	-rw-r--r--