Data Visualization Animation
Apply Disney's 12 animation principles to charts, graphs, dashboards, and information displays.
Quick Reference
| Principle | Data Viz Implementation | |-----------|------------------------| | Squash & Stretch | Bar overshoot, elastic settling | | Anticipation | Brief pause before data loads | | Staging | Sequential reveal, focus hierarchy | | Straight Ahead / Pose to Pose | Streaming vs snapshot data | | Follow Through / Overlapping | Staggered element entry | | Slow In / Slow Out | Smooth value interpolation | | Arc | Pie chart sweeps, flow diagrams | | Secondary Action | Labels following data points | | Timing | Entry 300-500ms, updates 200-300ms | | Exaggeration | Emphasize significant changes | | Solid Drawing | Consistent scales, clear relationships | | Appeal | Satisfying reveals, professional polish |
Principle Applications
Squash & Stretch: Bars can overshoot target height then settle. Pie slices expand slightly on hover. Bubbles compress on collision. Keep total values accurate—animation is transitional.
Anticipation: Brief loading state before data appears. Slight shrink before expansion. Counter briefly pauses before rapid counting. Prepares user for incoming information.
Staging: Reveal data in meaningful sequence—most important first. Highlight active data series. Dim unrelated elements during focus. Guide the data story with motion.
Straight Ahead vs Pose to Pose: Real-time streaming data animates continuously (straight ahead). Dashboard snapshots transition between states (pose to pose). Match approach to data nature.
Follow Through & Overlapping: Data points enter with staggered timing. Labels settle after their data elements. Grid lines appear before data. Legends animate with slight delay.
Slow In / Slow Out: Value changes ease smoothly—no jarring jumps. Use d3.easeCubicInOut or equivalent. Counter animations accelerate then decelerate. Progress bars ease to completion.
Arc: Pie charts sweep clockwise from 12 o'clock. Sankey diagram flows follow curved paths. Network graphs use force-directed arcs. Radial charts expand from center.
Secondary Action: Tooltips follow data point movement. Value labels count up as bars grow. Axis tick marks respond to scale changes. Shadows indicate data depth.
Timing: Initial entry: 300-500ms staggered. Data updates: 200-300ms. Hover states: 100-150ms. Filter transitions: 400-600ms. Slower timing aids comprehension.
Exaggeration: Significant changes deserve attention—pulse or glow outliers. Threshold crossings trigger emphasis. Anomalies animate more dramatically. Don't exaggerate the data itself.
Solid Drawing: Maintain consistent scales during animation. Transitions shouldn't distort data relationships. Preserve axis alignment. Visual hierarchy must remain clear throughout motion.
Appeal: Data entry should feel satisfying. Professional, purposeful motion builds trust. Avoid gratuitous animation—every motion should aid understanding.
Code Patterns
D3.js
// Staggered bar entry with easing
bars.transition()
.duration(500)
.delay((d, i) => i * 50)
.ease(d3.easeCubicOut)
.attr("height", d => yScale(d.value))
.attr("y", d => height - yScale(d.value));
// Smooth data updates
bars.transition()
.duration(300)
.ease(d3.easeCubicInOut)
.attr("height", d => yScale(d.value));
Chart.js
// Animation configuration
options: {
animation: {
duration: 500,
easing: 'easeOutQuart',
delay: (context) => context.dataIndex * 50
}
}
Data Type Timing
| Visualization | Entry | Update | Hover | |--------------|-------|--------|-------| | Bar chart | 400ms stagger | 300ms | 100ms | | Line chart | 600ms draw | 400ms | 150ms | | Pie chart | 500ms sweep | 300ms | 100ms | | Scatter plot | 300ms stagger | 200ms | 100ms | | Dashboard | 500-800ms cascade | 300ms | 150ms |
Accessibility Note
Always respect prefers-reduced-motion. Data visualization animation should aid comprehension, not hinder it. Provide instant-state fallback for users who disable motion.