Data Visualization: Representing Information on Modern Web

Animation with transitions

D3 transitions are one way of accomplishing this. Transitions use the familiar principle of changing a selection's attributes, except that changes are applied over time.

To slowly turn a rectangle red, we use the following line of code:

d3.select('rect').transition().style('fill', 'red');

We start a new transition with .transition() and then define the final state of each animated attribute. By default, every transition takes 250 milliseconds; you can change the timing with .duration(). New transitions are executed on all properties simultaneously unless you set a delay using .delay().

Delays are handy when we want to make transitions happen in sequence. Without a delay, they are all executed at the same time, depending ...