infinite-agents-public/vaccine_timeseries/vaccine_timeseries_2_polio/README.md

# 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:**
```javascript
// 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](https://www.chartjs.org/docs/latest/charts/line.html)

**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:
```javascript
.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](https://polioeradication.org)
- **WHO Immunization Data**: [who.int/teams/immunization-vaccines-and-biologicals](https://www.who.int/teams/immunization-vaccines-and-biologicals)
- **Chart.js Documentation**: [chartjs.org/docs](https://www.chartjs.org/docs/latest/)
- **Mapbox GL JS**: [docs.mapbox.com/mapbox-gl-js](https://docs.mapbox.com/mapbox-gl-js/api/)

---

**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**