D3 Examples - ch1ex3

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
  body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  canvas { border: 1px solid #ccc; }
</style>
</head>
​
<body>
​
  <canvas id="main-canvas" width="600" height="400"></canvas>
  
<script>
​
  /* Setting up canvas and context */ 
  /* ============================= */ 
​
  var canvas = d3.select('#main-canvas').node();
  var context = canvas.getContext('2d');
​
​
  /* Helper functions */ 
  /* ================ */ 
​
  function circle(ctx, x, y, r, color) {
​
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.fill();
​
  } // circle() 
​
​
  /* Drawing the background */
  /* ====================== */
​
  function drawScene() {
​
    context.save();
​
    // The house
    context.fillStyle = 'royalblue';
    context.fillRect(50, 150, 200, 100);
​
    // The door
    context.fillStyle = 'rgba(255, 255, 255, 0.9)';
    context.fillRect(60, 190, 40, 60);
​
    // The window
    context.save();
​
    context.translate(140, 190);
    context.fillRect(0, 0, 60, 30);
​
    context.restore();
​
    // The roof
    context.beginPath();
    context.moveTo(50, 150);
    context.lineTo(250, 150);
    context.lineTo(50+200/2, 100);
    context.closePath();
    context.fillStyle = '#A52A2A';
    context.fill();
​
    // The tree
    context.beginPath();
    context.lineWidth = 10;
    context.strokeStyle = 'brown'
    context.moveTo(300, 250);
    context.lineTo(300, 125);
    context.stroke();
​
    context.beginPath();
    context.fillStyle = 'green';
    context.arc(300, 150, 25, 0, Math.PI * 2);
    context.fill();
​
    context.restore();
​
  } // drawScene()
​
​
  /* Letting it rain */
  /* =============== */
​
  var rain = {
    items: [],
    maxDrops: 200,
    getDrop: function() {
​
      var obj = {};
      obj.xStart = Math.floor(Math.random() * canvas.width);
      obj.yStart = Math.floor(Math.random() * -canvas.height);
      obj.x = null;
      obj.y = null;
      obj.speed = Math.round(Math.random() * 2) + 5;
​
      return obj;
​
    },
    updateDrop: function(drop) {
      drop.x = drop.x === null ? drop.xStart : drop.x;
      drop.y = drop.y === null ? drop.yStart : drop.y + drop.speed;
      drop.y = drop.y > canvas.height ? drop.yStart : drop.y;
    }
​
  } // rain
​
​
  function update() {
​
    if (!rain.items.length) { // initialisation
​
      d3.range(rain.maxDrops).forEach(function(el) {
​
        var drop = rain.getDrop(el); // create a drop
        rain.updateDrop(drop); // update drops' position
        rain.items.push(drop); // add to drop array
​
      });
  console.log(rain.items);
    } else { // from 2nd update forward
​
      rain.items.forEach(function(el) {
​
          rain.updateDrop(el); // update drops' position
​
      });
​
    } // initialisation vs repeat update conditional
​
  } // update()
​
​
  function animate() {
​
    context.clearRect(0, 0, canvas.width, canvas.height);
​
    drawScene();
​
    rain.items.forEach(function(el) {
​
      circle(context, el.x, el.y, 1.5, 'blue');
​
    });
​
  } // animate()
​
​
  d3.interval(function() {
​
    update();
    animate();
​
  }, 10); // making it rain
​
​
​
</script>
</body>
​
    