Easy animations with transitions

Transitions are a special kind of animations where solely the change (transition) between two discrete values—so called states—is described. We can simply think of the previous animation example, a 1-dimensional dataset with the values blue and red, where these two values are interpolated during the animation period. In this previous example of the first section, we started from a custom animation and ended up step by step with a transition between these two states:

Transition between two states

In D3.js, we call the .transition() method on a Selection to create a transition object, which is again very similar to a Selection itself. This means that we can apply methods like .attr(), .style(), .delay(), and .duration() on this transition object to create automatically interpolated state transitions. Let's take a look at this in action and see how the previous example looks with the usage of transitions:

var blue =  d3.rgb(0,0,255);
var red = d3.rgb(255,0,0);...