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.