Chapter 6. Designing Transitions and Animations

In the previous chapters, you learned everything about responsive visualizations and interactions. Now, we want to make them beautiful and bring them to life using transitions and animations. In this chapter, you will cover the following:

• Understanding why we use JavaScript for Web animations

• Implementing a simple animation using D3 timers

• Learning about interpolation function and how they are used in D3

• Learning about easing functions and how they are used

• Understanding the concept of Bézier curves

• Implementing attribute and path transitions

• Understanding the main problems of shape tweens

In the first section, you will learn about different web standards used to animate DOM elements, and you will learn how to compare their advantages and disadvantages for animating visualizations. This will help you understand why we use D3's built-in animations and transitions rather than SMIL or CSS animations.

In the second section, we will cover the main concepts...

Is there a web standard for animations?

One of the great things about D3 is that it directly uses underlying standards, such as SVG and CSS, rather than abstracting them with an API. This gives the developer access to all the features that are available within SVG and the web itself. When it comes to animations, one may ask what the web standard for animations is.

In this first section, we will see different ways and technologies that currently exist for animating SVG elements on the web. This will help you to pick the right technology for your application and use case.

Animate SVG using SMIL

Synchronized Multimedia Integration Language(SMIL) is a specification for interactive multimedia content on the web. SMIL animation is a specification for animating DOM elements with an XML syntax that is directly embedded in the DOM tree. Thanks to this, it suits perfectly well to animate SVG visualizations.

SMIL animations for SVG can be constructed using the following elements:

• <animate>: This...

Creating animations with JavaScript

Before discussing animations in JavaScript or D3, we need to make sure what defines an animation. An animation is a timed sequence of transformations on one or multiple elements to create an effect of motion.

Timers and intervals in D3

Animation are timed transitions; therefore, we need to keep track of the time in an animation. If we are dealing with a huge number of elements, we have to manually keep a track of a huge number of timers. Luckily, D3 provides an abstraction for timers and interval function with the d3.timer(tickFn[, delay[, time]]) method. This timer function calls tickFn repeatedly after the relative delay or at an absolute date time until it returns true.

Let's write the previous JavaScript animation example with D3 timers:

<svg width="800" height="600">
<rect x="50" y="60" width="100" height="100"></rect>
</svg>
<script>
var rect = d3.select('rect:nth-of-type(1)');

animate(rect, 'x', 50, 650);

function animate...

Transitions

Until now, you learned a lot about animation, timers, interpolation, and easing, but does it really need all of this to do simple animations in D3. No; luckily, not as long as we use simple transitions. A Transition is an animation from a start state to one end state. The term is often used for animations in general and vice versa, but I want to emphasize that a transition is a simple animation that is defined by two states only; here, the interpolation between these states is automatically created from these states.

D3 has a very powerful support to create transitions. The only thing we have to do is to provide the starting state, call the .transition() method on a selection, and finally provide the ending state and D3 will take care of the rest. The .transition() method will return an object that is very similar to a selection and has most of its methods. In addition, it provides the .duration(duration), .delay(delay), and .easing(easingType) functions to define the duration...

Shape tweens

Shape tweens are the holy grail of transitions. I want you to remember the D3 Show Reel available at http://bl.ocks.org/mbostock/1256572 in 2011 by Mike Bostock—the author of D3. Here, he shows some awesome shape tween capabilities of D3 by transforming a chart into different representations.

Although a shape tween looks very simple and intuitive, they are almost never easy to create. Why is this so? Because the tools such as SMIL and D3 use simple string interpolation function, which extracts the numeric values of a string and interpolates them to the end state. And as soon the end state string looks different form the starting state—it could have a different amount of points, control points, or path commands—the resulting transition won't look good/smooth. Coming back to the D3 Show Reel, most of the transitions that we see are shape tweens of similar shapes—shapes with the same amount of control points.

This is true in particular for tweening between arbitrary shapes and writing...

Summary

In the first section, you learned about web standards for animations that although SMIL is pretty cool and powerful, we should start to use CSS and especially JavaScript animations. SMIL animations are deprecated in Chrome, and the specification for Web Animation (JavaScript) API is in progress.

In the following section, you learned how D3 timers abstract the native setInterval function and how we can use and built custom interpolations and easing functions. Finally, we saw how to build beautiful animations in D3 by the use of transitions. Transitions are automatic animations between two predefined states: a starting and an ending state. By chaining transitions together, we can again create animations.

In the last section, you learned about shape tweens and the problems of using it on custom shapes. String interpolation functions are dumb, so they only work for similar shapes (shapes with the same amount of control points). We will need to transform and subdivide shapes in order to...