Learning D3.js 5 Mapping - Second Edition

Running the app

So far, no raindrop has shown itself, but you have the background scene in place:

The initial scene

You have the means to animate the life cycle with the databind() and the draw() functions. You just call them in a sequence and wire this call-up with the buttons. Let's play this through for the Enter case. The cloud is empty and we want raindrops to transition into play from 0 to 0.2 opacity, that's how we specified it in the databind() function. We could just run:

databind(raindata);draw(context);

This will join the data to the custom elements and, as all elements are joined with new data, draw the enter selection – once! ...