infinite-agents-public/vaccine_timeseries/vaccine_timeseries_2_polio

Polio Eradication Progress: Global Vaccination Time Series 2000-2023

Overview

This visualization tracks one of the most successful public health campaigns in history: the global effort to eradicate polio. From 350,000+ annual cases in 1988 to fewer than 50 cases in 2023, the polio eradication initiative has achieved a 99.9% reduction in wild poliovirus transmission.

Visualization Features

Interactive Globe with Temporal Data

• Mapbox GL JS globe projection showing 60+ countries with polio vaccination data
• 24-year timeline (2000-2023) tracking vaccination coverage and case reduction
• Color-coded countries based on coverage levels:
  • 🟢 Green: High coverage (≥95%) - Polio-free regions
  • 🟠 Orange: Medium coverage (80-95%) - Improving
  • 🔴 Red: Low coverage (<80%) - Endemic/high-risk regions

Auto-Play Timeline Animation

• Play/Pause button for automatic year progression
• 1 second per year animation speed
• Automatic loop from 2000 → 2023 → 2000
• Manual slider control for precise year selection
• Real-time map updates showing changing coverage patterns

Chart.js Line Charts in Hover Popups

THIS IS THE KEY WEB LEARNING INTEGRATION

When hovering over any country, a popup displays:

• 24-year trend visualization using Chart.js
• Dual-metric display: Vaccination coverage (%) and wild polio cases
• Smooth curves with tension: 0.3 for visual clarity
• Filled area charts with transparent backgrounds
• Dark theme styling matching the globe aesthetic
• Interactive tooltips showing exact values per year

Chart.js Configuration Applied:

// Configuration from Chart.js line chart documentation
new Chart(ctx, {
    type: 'line',
    data: {
        labels: years,
        datasets: [
            {
                label: 'Vaccination Coverage (%)',
                data: coverage,
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.1)',
                tension: 0.3,  // Smooth curves learned from docs
                fill: true,    // Fill area under line
                borderWidth: 2
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        // Dark theme styling for consistency
        plugins: {
            title: {
                color: '#e5e7eb'
            }
        },
        scales: {
            x: {
                ticks: {
                    color: '#94a3b8'
                }
            }
        }
    }
});

The Polio Eradication Story

Historical Context

• 1988 Baseline: 350,000+ annual wild polio cases across 125+ countries
• Global Initiative Launched: WHO, UNICEF, Rotary International partnership
• Primary Vaccines: Oral Polio Vaccine (OPV) and Inactivated Polio Vaccine (IPV)
• Goal: Complete eradication of wild poliovirus by 2000 (later extended)

Progress from 2000-2023

Success Stories:

• India (Declared polio-free 2014): Coverage 62% → 95%, cases 265 → 0
• Nigeria (Last African case 2016): Coverage 38% → 76%, cases 280 → 0
• Sub-Saharan Africa: Massive coverage improvements through community campaigns
• Americas, Europe, Western Pacific: Maintained polio-free status with 95%+ coverage

Remaining Challenges:

• Afghanistan: Coverage 45% → 68%, endemic transmission continues due to conflict
• Pakistan: Coverage 52% → 72%, endemic transmission with periodic outbreaks
• Vaccine-derived poliovirus: Rare cases in low-coverage areas from weakened OPV strains
• Vaccine hesitancy: Slight coverage declines in high-income countries

2023 Status

• Global Coverage: 84% (down from 86% in 2019 due to COVID-19 disruptions)
• Wild Cases: <50 (all in Afghanistan/Pakistan)
• Endemic Countries: 2 (down from 20+ in 2000)
• Estimated Cost: $20+ billion invested since 1988
• Estimated Impact: 20+ million cases prevented, 1.5+ million deaths averted

Technical Implementation

Web Learning Integration

Source: Chart.js Line Chart Documentation

Techniques Applied:

1. Smooth Curve Rendering: tension: 0.3 creates smooth Bezier curves instead of sharp angles
2. Fill Configuration: fill: true with transparent backgroundColor creates area charts
3. Multi-Dataset Display: Two datasets (coverage + cases) on same chart for comparison
4. Responsive Sizing: maintainAspectRatio: false for consistent popup dimensions
5. Dark Theme Styling: All text colors matched to dark globe aesthetic

Critical Implementation Detail: Charts must be initialized AFTER the popup is added to the DOM:

.setHTML(`<canvas id="${canvasId}"></canvas>`)
.addTo(map);

// Chart initialization MUST come after .addTo(map)
const ctx = document.getElementById(canvasId).getContext('2d');
new Chart(ctx, config);

Data Generation

60+ countries with realistic progression patterns:

• Endemic countries: Slow, irregular progress with fluctuations
• Low baseline countries: Rapid improvement followed by plateau
• High achievers: Slight decline due to vaccine hesitancy
• Developed countries: Stable high coverage (95-97%)

Architecture

• Shared Mapbox Config: Uses ../../mapbox_test/shared/mapbox-config.js
• GeoJSON Storage: Time series stored as JSON arrays in feature properties
• Dynamic Updates: Timeline slider updates all country data in real-time
• Unique Chart IDs: Counter-based canvas IDs prevent Chart.js conflicts

Running the Visualization

1. Ensure Mapbox token is configured in mapbox_test/shared/mapbox-config.js
2. Open index.html in a modern web browser
3. Interact:
   • Click "▶️ Play" to watch 24-year progression
   • Hover over countries to see Chart.js trend charts
   • Drag timeline slider for manual year selection
   • Rotate globe by clicking and dragging

Data Insights

Coverage Patterns

• Rapid improvement in South Asia and Southeast Asia (2000-2010)
• Persistent challenges in conflict-affected regions (Afghanistan, Pakistan, Somalia)
• Slight decline in high-income countries due to vaccine hesitancy
• COVID-19 impact visible in 2020-2021 coverage dips

Case Reduction

• Exponential decline as coverage improves beyond 80%
• Endemic transmission requires sustained 95%+ coverage
• Importation risk remains in low-coverage areas
• Certification standard: 3+ years without wild poliovirus detection

Geographic Disparities

• Americas: Polio-free since 1994, maintained through routine immunization
• Western Pacific: Certified polio-free 2000
• Europe: Certified polio-free 2002
• South-East Asia: Certified polio-free 2014 (India critical)
• Africa: Certified free of wild poliovirus 2020
• Eastern Mediterranean: Only remaining endemic region (Afghanistan, Pakistan)

Future Outlook

Path to Eradication

• Strengthen surveillance in high-risk areas
• Maintain high coverage in polio-free regions to prevent importation
• Switch to IPV to eliminate vaccine-derived poliovirus risk
• Address vaccine hesitancy through community engagement
• Conflict resolution in endemic countries for access to children

Post-Eradication Phase

• Global IPV coverage to prevent re-emergence
• Laboratory containment of poliovirus samples
• Outbreak response capacity maintenance
• Legacy planning for infrastructure and lessons learned

References

• Global Polio Eradication Initiative: polioeradication.org
• WHO Immunization Data: who.int/teams/immunization-vaccines-and-biologicals
• Chart.js Documentation: chartjs.org/docs
• Mapbox GL JS: docs.mapbox.com/mapbox-gl-js

---

Generated as part of the Infinite Agentic Loop web-enhanced visualization series Iteration 2: Intermediate level with Chart.js line chart integration Next iteration will add dual-axis charts for better coverage/cases comparison