data-visualization

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.