We are now going to look at using D3.js transitions to represent changes in the information underlying a visual. We will start with examples for examining several concepts involved in using D3.js to animate the properties of visual elements from one state to another.
By the end of this chapter, we will extend the bubble visualization from Chapter 6, Creating Scatter and Bubble Plots, to demonstrate how we can animate our bubbles as we move through multiple years of data. This will demonstrate the construction of a relatively complex animation through which a user can easily deduce trends in the information.
In this chapter, we will cover the following topics through examples:
Animating using transitions
Animating the fill color of a rectangle
Animating multiple properties simultaneously
Delaying an animation
Creating chained transitions
Handling the start and end events of transitions
Changing the content and size of text using tweening
Using timers to schedule...