D3 Examples - Matrix Layout (Michael Aufreiter)

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="matrix.js"></script>
    <style type="text/css">
​
rect.cell {
  fill: red;
  
  fill: steelblue;
  fill-opacity: .8;
  stroke: white;
}
​
rect.cell:hover {
  fill-opacity: 1.0;
}
​
    </style>
  </head>
  <body>
    <div id="canvas"></div>
    <script type="text/javascript">
​
var plot = MatrixPlot();
​
setInterval(function() {
  plot.update({
    collection: {
      items: function() { return d3.zip(d3.range(10 + ~~(Math.random() * 50))); }
    }
  });
}, 2500);
​
    </script>
  </body>
</html>
​
    