On the abstracted top level our code looks as follows:

var canvas = d3.select('#main-canvas').node();  // set up
var context = canvas.getContext('2d');

var rain = { }                                  // produce data
d3.interval(function() {
    update();                                   // update/process the data
    animate();                                  // re-draw the canvas
}, 10);                                         

After setting up the canvas, you will produce some data – the raindrops. Then you will enter a loop within which you will update the data for the next scene and then draw it. In our case, update() changes the raindrops' positions and animate() will clear the current image and draw a new image with the updated raindrop positions.

This loop (or at least a very similar incarnation) is called the game loop, as it is used in game programming with Canvas. You process the gamer's input, update the game data accordingly, and draw the new scene. We will get used to this pattern quickly. Now, let's look at the details.