Transitions

Transitions in D3

A transition in D3 is an application of an animation to an element on the page. For the purpose of demonstration, we can think of an element as being one of the common shapes and objects which include circles, ellipses, rectangles, lines, polylines, polygons, text, and paths. This is a gross oversimplification, as transitions can be applied in far more complex ways, but this will help us get started. In addition, an animation could be described as a change in an attribute or style of an element over time.

Example

If we use a circle as an example, we know that a circle is described by three required attributes:

• cx: The position of the center of the circle in the x direction (left/right) measured from the left side of the screen.
• cy: The position of the center of the circle in the y direction (up/down) measured from the top of the screen.
• r: The radius of the circle from the cx,cy position to the perimeter of the circle.

To animate a circle, we would therefore be changing (or transitioning) one of those attributes over time.

The following JavaScript will draw a simple blue circle with a radius of 20 pixels at the position 40, 250.