D3 Examples - rect()

xxxxxxxxxx
 
<!doctype html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.js"></script>
<canvas id="painting" width="960" height="500"></canvas>
  <script>
    var canvas = d3.select("#painting").node(); // create canvas
    var ctx = canvas.getContext("2d"); // create objects on canvas
​
    ctx.globalAlpha = 0.5; // opacity of objects
​
    var data = d3.range(1000) // number of objects
      .map(function(d) {
        return {
          x: 960 * Math.random(),
          y: 500 * Math.random(),
          width: 40 * Math.random(),
          height: 40 * Math.random(),
          group: Math.floor(10*Math.random())
        }
      })
​
      var render = function(arr) {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        arr.forEach(function(d) {
          ctx.fillStyle = "rgb(40" + 20*d.group + ",0)"; // color objects
          // ctx.fillStyle = colorScale(d.group);
          ctx.fillRect(d.x, d.y, d.width, d.height);
        });
      };
​
      d3.timer(function(t) {
        data.forEach(function(d) {
          d.x += (2 * Math.random() - 1);
          d.y += (2 * Math.random() - 1);
        });
      });
​
      render(data);
​
  </script>
</html>
    