For the ambitious, this is a great intro to creating your own animations and transitions in d3.js.

In interactive visualisation, there is the word reactive. Well, maybe not literally, but close enough. The fact is that reactivity, or the propension of a visualisation to respond to user actions, can really help engage the user in a visualisation, and help them understand its results. Both of which are usually good things. How can this reactivity be achieved? Through animations. So I’ll go ahead and state that animation, if done right, can make any interactive data visualization better. How is that? When coupled with interaction, it’s a very useful way to give feedback to the user. What has changed since their last command? If what’s on screen animates from one state to another,… keep reading

Source: Creating Animations and Transitions With D3 on the Visually Blog

The principle

If you know how to draw in d3, you almost know how to animate. (And if you don’t know yet, Alignedleft has a splendid collection of tutorials to get you started, and the d3 site lists more, including some by yours truly.)

Animations are called “transitions” in d3 for a reason. A technical definition of animation can be that over a certain lapse of time, one or more characteristics of an object would transition from one value to another.

By characteristics, we mean just about anything that can be expressed numerically.

A few examples of transitions

Not surprisingly, when you update the position of an item smoothly over time, it moves. In svg, position is determined for most shapes, such as our blue rectangle here, by the x and y attributes, which correspond to the top-left corner of the shape. For circles, you use cx and cy, or the coordinates of the center. For paths, such as our red triangle, you actually specify the position of all of the points in the “d” attribute.

Likewise, when you change size, your object grows (or shrinks). You can use width and height for shapes like rectangles, or r for circles.

Color is really a numerical attribute, too, and it is indeed possible (and very useful) to transition from one color to another. In svg, color is a style attribute that is defined by fill or stroke.

Not unlike color, it’s very useful to be able to vary opacity. When opacity is set to 0, the corresponding object is completely transparent. So transitioning on opacity is very useful to make objects fade in or out.

Read the rest of the tutorial: Creating Animations and Transitions With D3 on the Visually Blog