Data Viz Commercials
Expert in turning data stories into compelling video and animation content — the intersection of data visualization, motion design, and narrative storytelling that makes data shareable on social media.
Decision Points
1. Tool Selection by Requirements
IF need 100+ personalized videos from dataset
→ Use Remotion (React-based, data-driven)
ELSE IF need explainer with voice-over sync
→ Use Motion Canvas (TypeScript generators)
ELSE IF need bar chart race for social media quickly
→ Use Flourish (no-code, built-in templates)
ELSE IF recording existing dashboard
→ Use OBS Studio + screen capture
ELSE IF custom web interactive
→ Use D3 + GSAP
2. Narrative Structure Selection
IF audience = social media (Twitter/LinkedIn)
→ Hook (0-3s) → Insight (3-15s) → Proof (15-25s) → CTA (25-30s)
ELSE IF audience = presentation/explainer
→ Context (0-10s) → Problem (10-20s) → Data reveal (20-45s) → Solution (45-60s)
ELSE IF audience = educational
→ Question (0-5s) → Setup (5-15s) → Step-by-step reveal (15-50s) → Summary (50-60s)
3. Animation Timing Strategy
IF showing magnitude/comparison
→ Grow bars from zero (1-2s per group)
ELSE IF showing trend over time
→ Line drawing left-to-right (2-3s total path)
ELSE IF showing transformation
→ Morph transition (1-1.5s between states)
ELSE IF showing multiple categories
→ Cascade reveal (0.2s stagger between items)
4. Platform Optimization
IF target = Instagram/TikTok/YouTube Shorts
→ 9:16 aspect, <60s duration, mobile-first text sizing
ELSE IF target = Twitter/LinkedIn
→ 16:9 or 1:1 aspect, 30-90s duration, high contrast colors
ELSE IF target = presentations
→ 16:9 aspect, 60-300s duration, detailed annotations
Failure Modes
| Anti-Pattern | Detection Rule | Diagnosis | Fix |
|---|
| Over-Animation Chaos | If every element bounces/spins/zooms simultaneously | Too much motion competing for attention | Remove decorative animations; animate only to reveal data insights |
| Unclear Data Arc | If viewer asks "what am I supposed to see?" after 15 seconds | No narrative thread connecting charts | Apply Hook→Context→Insight→Proof→CTA structure; one insight per video |
| Long Render Blocks | If Remotion render takes >10min for 60s video | Inefficient frame calculations or complex animations | Profile with npx remotion studio; simplify interpolations; cache expensive computations |
| Mobile Text Illegibility | If text <24pt or thin fonts used | Optimized for desktop, fails on phone | Test on actual phone at 480p; use bold fonts; minimum 24pt size |
| Audio-Visual Desync | If narration doesn't match chart reveals | Timeline not planned with audio script | Storyboard frame-by-frame; use waitFor() in Motion Canvas; sync points every 5-10s |
Worked Examples
Example 1: When Remotion Beats Flourish
Scenario: Client needs 500 personalized "Year in Review" videos for enterprise customers, each showing their specific usage data.
Decision Process:
- Flourish: Would require manual upload of 500 datasets, individual exports
- Remotion: One template, batch render with JSON data per customer
Remotion Implementation:
export const CustomerReview: React.FC<{data: CustomerData}> = ({data}) => {
return (
<AbsoluteFill style={{backgroundColor: '#0f172a'}}>
<Sequence from={0} durationInFrames={90}>
<Txt fill="white" fontSize={60}>
{data.companyName}'s 2025 Growth
</Txt>
</Sequence>
<Sequence from={90} durationInFrames={120}>
<AnimatedCounter
from={0}
to={data.totalUsers}
suffix=" users added"
/>
</Sequence>
</AbsoluteFill>
);
};
Batch Render:
npx remotion render src/index.ts CustomerReview \
--props-from-file=customers.json \
--concurrency=4 \
out/
Result: 500 videos rendered overnight vs. weeks of manual work. Engagement increased 340% vs. static PDFs.
Example 2: When to Stop Animating and Use Static
Scenario: Complex financial dashboard with 12 charts showing quarterly performance.
Novice Approach: Animate all 12 charts in sequence (3+ minute video)
Expert Decision: Too much cognitive load; attention will drop after 30 seconds
Solution:
- Pick the ONE key insight (revenue growth acceleration in Q3)
- Show only 3 supporting charts: trend line, comparison bars, breakdown pie
- Make static dashboard available as follow-up resource
Animation Strategy:
- Chart 1: Revenue line drawing over time (reveal the acceleration)
- Chart 2: Q3 vs Q2 comparison bars (grow from zero to show magnitude)
- Chart 3: Revenue source breakdown (cascade reveal by segment)
Result: 45-second focused video + static comprehensive report drove 85% more click-throughs than 3-minute version.
Quality Gates
[ ] Audio-text sync verified (narration matches chart reveals within 0.5s)
[ ] Color contrast meets WCAG AA (4.5:1 ratio minimum for text)
[ ] Call-to-action text is legible at 480p on mobile device
[ ] Each scene duration is <3 seconds (maintains social media attention)
[ ] Data trends are visible when viewed at phone screen size
[ ] Animation serves comprehension (every motion reveals data insight)
[ ] Single clear narrative thread connects all charts
[ ] Data source, units, and timeframe are labeled
[ ] Background music does not overpower narration (≤-12dB relative)
[ ] Video file under 100MB for social media upload limits
[ ] Thumbnail frame compelling without playing video
[ ] Exported in platform-native aspect ratio (no black bars)
NOT-FOR Boundaries
This skill should NOT be used for:
- Static data visualization → Use
data-viz-2025 instead
- General video editing and post-production → Use
video-processing-editing instead
- Full video production with AI narration/music → Use
ai-video-production-master instead
- Interactive web-based data stories → Use
data-viz-2025 with D3 interactivity
- Live presentation software → Use presentation tools with this skill's storyboarding principles
- Long-form documentary content → Use
ai-video-production-master for multi-chapter structure
Delegate when:
- Request involves >5 minutes of content (documentary territory)
- Need advanced video effects beyond data animation (motion graphics, 3D)
- Audio production is the primary focus (podcast-style content)
- Interactive exploration is more important than linear narrative