data-visualization

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.