D3 offers unmatched functionality for producing data visualizations on the web. You might be aware of this, reading this very book. One important part of what D3 offers is its model for how data-infused elements evolve on the screen. It has a certain way of thinking about the life cycle of each element.

In practice, you inject data into a yet non-existent DOM, and D3 creates new elements of your choice as per the data you inject, usually one element per data point. If you want to inject new data into the DOM you can do so and D3 identifies which elements have to be newly created, which elements are allowed to stay, and which elements should pack up and leave the screen. This way you can represent three distinct states of a common data-flow: entering data, updating data, and exiting data. You can then grab these selections, manipulate their visual properties as well as transition between them with D3's built-in interpolators, leveraged by d3.transition().

This plays well with the retained SVG elements that are manifested in the DOM. However, we have no DOM elements in the canvas and must, therefore, be a little clever about producing them. Let's see how we can follow D3's life cycle model as well as using D3's transitions to interpolate between these three states.