Class 3: Transitions and Animation

The following are the links to working versions of each of the data visualizations and notes about each visualization.

To get access to the code behind the examples, you'll need to download it from A Taste of D3's GitHub site.

Basic Transitions

• Changing one feature: making a rectangle move
• Changing several features: changing a rectangle's location and color
• Data into circles: using delay and duration
• Animating text: Ms. Melissa's Dash-Your-Hopes Board

Animation Loops: Chained Transitions

NOTE: everything below is still v3

• Pulsating circle
• Circle chain

Extra Credit

• Animation Loops: Using a Timer
• Chained transitions using attrTween: moving along a curvy path
• Easing