Data Visualization

This applies Disney's 12 animation principles to charts and dashboards, which sounds gimmicky but actually makes sense. You get specific timing recommendations (300-500ms for initial entry, 200-300ms for updates), staggered reveals for data points, and easing functions that make value transitions readable instead of jarring. The quick reference table maps each principle to concrete implementations like bar overshoot, sequential staging, and curved paths for flow diagrams. Includes D3.js and Chart.js patterns you can copy directly. The timing guidance alone is worth it if you've ever animated a chart and had it feel either sluggish or too abrupt.

skills.sh installs: 629
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill data-visualization --agent claude-code

Installs into .claude/skills of the current project.

Files

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.

SKILL.md on GitHub