Animations

In data visualizations, animations are a way to visualize changes in the dataset, which makes it much easier to see, understand, and follow the data changes. An animation usually consists of timed key frames that represent these changes over time in the visualization. Now, we will go through an animation step by step and see the different things that need to be considered when creating a custom animation.

Let's look at a simple example. In the following figure, we can see an animation built by six key frames to create an illusion of a color transition from blue to red:

Animation with 6 key frames

Timer in D3.js with d3.timer

To implement this animation, D3.js provides an efficient and smart timer queue. This lets you run multiple concurrent timers. To create a timer, we can simply call the d3.timer(tickFn[, delay[, time]]) function. The delay and time arguments let you schedule the start of the timer after a certain delay of milliseconds or at a specific point in time.

The first argument...