Learning D3.js 5 Mapping - Second Edition

Updating each drop

The site loads and things will kick off with the d3.interval function, which calls all functions it embraces every 10 milliseconds. First, it will call update() which returns an array of objects. Each object is a drop most notably characterized by an arbitrary x and y position. This is how it looks:

function update() {  if (!rain.items.length) {    d3.range(rain.maxDrops).forEach(function(el) {      var drop = rain.getDrop(el);      rain.updateDrop(drop);      rain.items.push(drop);    });  } else {    rain.items.forEach(function(el) {      rain.updateDrop(el);    });  }}

The first time update() is called it produces a drop, updates its position, and pushes it into the rain items array. Any other time, it just updates the drop's position. We use d3.range ...