Vizzu Animations

Vizzu Animated Data Visualizations

Purpose: Animated data visualizations for medical content using Vizzu-lib. Perfect for trial results, survival curves, and medical dashboards.

Status: ✅ Complete - Ready for use

Priority: P1 - Fills critical gap: animated data visualizations

Quick Start

from vizzu_animations.templates import (
    create_animated_kaplan_meier,
    create_animated_forest_plot,
    create_animated_bar_comparison,
)

# Kaplan-Meier survival curves
treatment = [(0, 100), (6, 94), (12, 88), (18, 83), (24, 78)]
control = [(0, 100), (6, 91), (12, 83), (18, 76), (24, 69)]

create_animated_kaplan_meier(
    treatment, control,
    treatment_name="Dapagliflozin",
    control_name="Placebo",
    hr_text="HR 0.74 (95% CI 0.65-0.85)",
    output="kaplan_meier.html"
)

Why Vizzu?

Fills gap: Manim does educational animations, Vizzu does data animations.

Medical Use Cases

1. Animated Kaplan-Meier Curves

Show survival divergence unfolding over time.

from vizzu_animations.templates import create_animated_kaplan_meier

treatment = [(0, 100), (6, 94), (12, 88), (18, 83), (24, 78)]
control = [(0, 100), (6, 91), (12, 83), (18, 76), (24, 69)]

create_animated_kaplan_meier(
    treatment, control,
    title="DAPA-HF: Event-Free Survival",
    hr_text="HR 0.74 (95% CI 0.65-0.85)",
)

Use for: Trial results, survival analysis, event-free survival

2. Animated Forest Plots

Studies accumulating in meta-analysis.

from vizzu_animations.templates import create_animated_forest_plot

studies = [
    {"name": "DAPA-HF", "estimate": 0.74, "lower": 0.65, "upper": 0.85, "weight": 60},
    {"name": "EMPEROR-Reduced", "estimate": 0.75, "lower": 0.65, "upper": 0.86, "weight": 50},
    {"name": "SOLOIST-WHF", "estimate": 0.67, "lower": 0.52, "upper": 0.85, "weight": 30},
]

create_animated_forest_plot(
    studies,
    title="SGLT2 Inhibitors in Heart Failure",
    show_pooled=True,
)

Use for: Meta-analyses, systematic reviews, pooled estimates

3. Animated Bar Comparisons

Before/after or treatment vs control.

from vizzu_animations.templates import create_animated_bar_comparison

create_animated_bar_comparison(
    categories=["Primary Endpoint", "CV Death", "HF Hospitalization"],
    group1_values=[16.3, 11.6, 10.0],
    group2_values=[21.2, 14.5, 15.6],
    group1_name="Dapagliflozin",
    group2_name="Placebo",
    title="DAPA-HF Trial Results",
)

Use for: Treatment comparisons, before/after outcomes, subgroup analyses

4. Animated Trend Lines

Outcomes progressing over time.

from vizzu_animations.templates import create_animated_trend_line

data = {
    "2010-2015": [(2010, 28.5), (2012, 26.2), (2015, 23.8)],
    "2015-2020": [(2015, 23.8), (2017, 21.5), (2020, 19.2)],
}

create_animated_trend_line(
    data,
    title="Heart Failure Mortality Trends",
    x_label="Year",
    y_label="Mortality Rate (per 100,000)",
)

Use for: Epidemiological trends, longitudinal outcomes, temporal patterns

5. Animated Trial Enrollment

Patient recruitment dashboard.

from vizzu_animations.templates import create_animated_trial_enrollment

enrollment = [
    ("Month 1", 142),
    ("Month 3", 456),
    ("Month 6", 1024),
    ("Month 12", 3456),
    ("Month 18", 4744),
]

create_animated_trial_enrollment(
    enrollment,
    target=4744,
    title="DAPA-HF Enrollment Progress",
)

Use for: Trial dashboards, recruitment tracking, site performance

CLI Usage

cd skills/cardiology/visual-design-system/vizzu_animations

# List available templates
python vizzu_cli.py list

# Generate all demos
python vizzu_cli.py demo --template all

# Generate specific demo
python vizzu_cli.py demo --template kaplan-meier --output km.html

# Create from custom data
python vizzu_cli.py create \
  --template bar \
  --data trial_results.csv \
  --x Treatment \
  --y EventRate \
  --title "Trial Results"

# Export HTML to video
python vizzu_cli.py export animation.html --format mp4
python vizzu_cli.py export animation.html --format gif --fps 15
python vizzu_cli.py export animation.html --format webm

Python API

Using Templates (Recommended)

from vizzu_animations.templates import (
    create_animated_kaplan_meier,
    create_animated_forest_plot,
    create_animated_bar_comparison,
    create_animated_trend_line,
    create_animated_trial_enrollment,
)

# Each template returns Path to HTML file
output_path = create_animated_kaplan_meier(...)
print(f"Animation saved to: {output_path}")

Using Low-Level API

from vizzu_animations import VizzuAnimator
import pandas as pd

animator = VizzuAnimator()

# Prepare data
df = pd.DataFrame({
    'Study': ['DAPA-HF', 'EMPEROR-Reduced', 'DELIVER'],
    'HR': [0.74, 0.75, 0.82],
    'Treatment': ['Dapagliflozin', 'Empagliflozin', 'Dapagliflozin']
})

# Create animated bar chart
animator.create_animated_bar(
    df,
    x_col='Study',
    y_col='HR',
    color_col='Treatment',
    title='SGLT2i Heart Failure Trials',
    output='trials.html',
    duration=3000,  # 3 seconds
)

Available Methods

Export to Video

MP4 (Best for YouTube, presentations)

from vizzu_animations.export_utils import export_to_mp4

export_to_mp4(
    'animation.html',
    'animation.mp4',
    duration=5000,  # 5 seconds
    fps=30,
    width=1920,
    height=1080,
)

GIF (Best for Twitter, social media)

from vizzu_animations.export_utils import export_to_gif

export_to_gif(
    'animation.html',
    'animation.gif',
    duration=5000,
    fps=15,  # Lower FPS for smaller file
    width=800,
    height=600,
    optimize=True,
)

WebM (Best for web embedding)

from vizzu_animations.export_utils import export_to_webm

export_to_webm(
    'animation.html',
    'animation.webm',
    duration=5000,
    fps=30,
)

Requirements:

• Playwright: pip install playwright && playwright install chromium
• ffmpeg: apt-get install ffmpeg or brew install ffmpeg
• Optional: gifsicle for GIF optimization

Integration with Visual Router

Vizzu is automatically routed when you request animated data visualizations:

Keywords that route to Vizzu:

• "animated data"
• "animated chart"
• "animated forest plot"
• "animated survival curve"
• "animated enrollment"
• "chart transition"
• "morphing chart"

Example:

User: "Create an animated Kaplan-Meier curve showing treatment vs control"
→ Routes to: vizzu_animations/templates/kaplan_meier.py

Design Token Integration

Vizzu automatically uses colors from the visual-design-system:

All visualizations are:

• ✅ Colorblind-safe (Paul Tol palette)
• ✅ WCAG AA compliant (4.5:1 contrast minimum)
• ✅ Publication-grade (Helvetica, proper spacing)

Directory Structure

vizzu_animations/
├── SKILL.md                    # This file
├── __init__.py                 # Package exports
├── data_animator.py            # Main Python wrapper
├── data_animator_ipyvizzu.py   # Alternative ipyvizzu wrapper
├── export_utils.py             # Video export utilities
├── renderer.js                 # JavaScript renderer
├── vizzu_cli.py                # Command-line interface
├── package.json                # Node.js dependencies
├── templates/
│   ├── __init__.py
│   ├── kaplan_meier.py         # Survival curve template
│   ├── forest_plot.py          # Meta-analysis template
│   ├── bar_chart.py            # Comparison template
│   ├── line_chart.py           # Trend template
│   └── trial_enrollment.py     # Enrollment dashboard
└── outputs/                    # Generated animations

Comparison: Vizzu vs Manim

Use Vizzu when: You have data that changes over time (trials, trends, enrollment)

Use Manim when: You need to explain concepts (mechanisms, ECG interpretation, anatomy)

Examples

Example 1: SGLT2i Meta-Analysis

from vizzu_animations.templates import create_animated_forest_plot

studies = [
    {"name": "DAPA-HF", "estimate": 0.74, "lower": 0.65, "upper": 0.85, "weight": 60},
    {"name": "EMPEROR-Reduced", "estimate": 0.75, "lower": 0.65, "upper": 0.86, "weight": 50},
    {"name": "SOLOIST-WHF", "estimate": 0.67, "lower": 0.52, "upper": 0.85, "weight": 30},
    {"name": "DELIVER", "estimate": 0.82, "lower": 0.73, "upper": 0.92, "weight": 70},
]

output = create_animated_forest_plot(
    studies,
    title="SGLT2 Inhibitors Reduce Heart Failure Events",
    show_pooled=True,
)

# Export to social media
from vizzu_animations.export_utils import export_to_gif
export_to_gif(output, 'sglt2i_meta.gif', fps=10, optimize=True)

Example 2: Mortality Trends

from vizzu_animations.templates import create_animated_trend_line

data = {
    "Pre-GDMT Era": [(1990, 32.5), (1995, 30.2), (2000, 28.1)],
    "GDMT Era": [(2000, 28.1), (2005, 25.3), (2010, 22.8)],
    "SGLT2i Era": [(2010, 22.8), (2015, 19.5), (2020, 16.2)],
}

create_animated_trend_line(
    data,
    title="Heart Failure Mortality: 30 Years of Progress",
    x_label="Year",
    y_label="Age-Adjusted Mortality (per 100,000)",
)

Example 3: Trial Comparison Dashboard

from vizzu_animations.templates import create_animated_bar_comparison

create_animated_bar_comparison(
    categories=['All-Cause Mortality', 'CV Death', 'HF Hosp', 'Total Events'],
    group1_values=[17.1, 11.6, 10.0, 26.5],
    group2_values=[19.8, 14.5, 15.6, 32.8],
    group1_name='Dapagliflozin',
    group2_name='Placebo',
    title='DAPA-HF: All Key Endpoints Reduced',
    y_label='Event Rate (%)',
)

Performance Benchmarks

Optimization tips:

• Use lower FPS for GIFs (10-15 instead of 30)
• Optimize GIFs with gifsicle -O3
• Use WebM for web (50% smaller than MP4)
• Keep animations under 10 seconds for social media

Troubleshooting

Issue: "ipyvizzu not installed"

pip install ipyvizzu pandas --break-system-packages

Issue: "ffmpeg not found"

# Ubuntu/Debian
apt-get install ffmpeg

# macOS
brew install ffmpeg

Issue: "Playwright not available"

pip install playwright
playwright install chromium

Issue: "Animation not rendering"

• Check that Node.js and npm are installed
• Ensure Vizzu is installed: npm install vizzu
• Verify Playwright browsers are installed

References

• Vizzu Documentation
• ipyvizzu Python Library
• Visual Design System Tokens

Future Enhancements

• Direct MP4 export without HTML intermediate
• Real-time data streaming for live dashboards
• Interactive controls (pause, speed, scrub)
• 3D visualizations for complex data
• Integration with R (rVizzu package)

Last Updated: 2026-01-01 Maintainer: Dr. Shailesh Singh Status: Production-ready