This video is available to students only

Animations and Transitions

We talk about the different ways we can animate changes in our charts, and rule out SVG <animate>.

When we update our charts, we can animate elements from their old to their new positions. These animations can be visually exciting, but more importantly, they have functional benefits. When a bar animates from one height to another, the viewer has a better idea of whether it's getting larger or smaller. If we're animating several bars at once, we're drawing the viewer's eye to the bar making the biggest change because of its fast speed.

By analogy, imagine if track runners teleported from the start to the finish line. For one, it would be terribly boring to watch, but it would also be hard to tell who was fastest.

There are multiple ways we can animate changes in our graphs:

  • using SVG <animate>

  • using CSS transition

  • using d3.transition()


This page is a preview of Fullstack D3 Masterclass

Start a new discussion. All notification go to the author.