We will still let it rain over our little house and its tree, but now the rain will follow its natural course – the rain's life cycle, as it were. It will Enter in the form of a cloud, it will Update as the rain moving into a big puddle on the ground, and it will Exit turning the puddle into a lush patch of grass:

As you can see, there are buttons to the right allowing you to control the three state changes.

The structure of the code will be similar to the previous pure Canvas animation. Conceptually, you calculate the elements' (the raindrops') positions first and then draw. However, the way we achieve this interaction is entirely via D3. To lift the lid in advance, you will bind the data to virtual DOM elements. These DOM elements are ‘virtual'. As Canvas has no DOM, you create a basic DOM structure in memory, with which we can use D3's selections, the data join, and consequently the Enter-Update-Exit API. Additionally, the app will have button interactions to change the elements' state according to the changed data. We have discussed the Canvas setup as well as data preparation already, so let's focus on the core novelty of this section, the databind and the draw!