Tutorials > Intro to D3.js

5. D3.js: Animation & Interaction, Part I

August 1, 2013 | 5 minutes | By Scott Becker

Animation can transform a boring static picture into an amazing experience, and get people's attention. But beyond looking nice, animation makes it easier to follow the data. Learn about transitions, key frames, interpolators, and timing.

 
Watch Preview

 

Resources

Code

Standard Selections vs Transitions

// update an element instantly
d3.select('circle')
    .attr('cx', 200);

// update an element with a transition
d3.select('circle')
    .transition().attr('cx', 200);

To access full notes, download code and videos for offline viewing: