# Measles Vaccination Coverage Timeline (2000-2023)

## Overview

This visualization tracks global measles vaccination coverage (MCV1 and MCV2) across 60 countries over 24 years (2000-2023), demonstrating the profound impact of immunization programs on disease burden and the challenges posed by recent disruptions.

## Key Findings

### Global Progress (2000-2023)

**Coverage Improvements:**
- Global MCV1 coverage increased from 72% (2000) to 83% (2023)
- Peak coverage achieved in 2019: 86%
- Estimated **60 million measles deaths averted** through vaccination programs (2000-2023)

**COVID-19 Impact:**
- Coverage dropped from 86% (2019) to 81% (2021)
- Represents **25 million children** who missed their measles vaccine in 2021
- Partial recovery to 83% by 2023, but still below pre-pandemic levels

**Disease Burden Changes:**
- Measles cases declined dramatically in high-coverage countries (EURO, AMRO)
- Resurgence in conflict zones and areas with vaccine hesitancy (2019-2023)
- Case fatality rates remain highest in low-income settings (2-3%)

### Regional Disparities

**Africa (AFRO):**
- Average coverage: 60-70% (consistently below herd immunity threshold)
- Highest disease burden: Nigeria, DRC, Ethiopia
- Progress hindered by conflict, health system weaknesses, logistics challenges
- Example: Nigeria - 52% coverage (2015), ~45,000 cases, 850 deaths

**Europe (EURO):**
- Average coverage: 90-95% (generally above herd immunity)
- Localized outbreaks due to vaccine hesitancy pockets
- Countries like Poland, Spain maintain >94% coverage
- Romania, Ukraine face challenges: 79-82% coverage

**South-East Asia (SEARO):**
- Mixed performance: Bangladesh (82%), India (74%), Indonesia (68%)
- Large populations mean coverage gaps affect millions
- Strong immunization programs in Bangladesh, Vietnam showing success

**Eastern Mediterranean (EMRO):**
- Severe disruptions in conflict zones: Yemen (45%), Syria (52%)
- High performers: Saudi Arabia (94%), UAE (92%)
- Iraq rebuilding coverage post-conflict: 64%

**Americas (AMRO):**
- Generally strong: USA (91%), Argentina (92%)
- Venezuela decline due to health system collapse: 79%
- Measles elimination achieved in many countries, but at risk

**Western Pacific (WPRO):**
- Leaders: South Korea (96%), Malaysia (93%), China (89%)
- Papua New Guinea lags: 58% coverage

### Income-Based Patterns

**High-Income Countries:**
- Coverage: 89-96%
- Challenge: Vaccine hesitancy, not access
- Low disease burden, but vulnerable to importations

**Upper-Middle Income:**
- Coverage: 79-92%
- Transition challenges as countries graduate from GAVI support
- Some experiencing coverage declines (Venezuela, Ukraine)

**Lower-Middle Income:**
- Coverage: 61-88% (wide variation)
- Balancing competing health priorities
- Urban-rural disparities significant

**Low-Income Countries:**
- Coverage: 42-62% (consistently lowest)
- Fundamental access barriers: conflict, infrastructure, supply chain
- Highest disease burden and case fatality rates

## Visualization Features

### Interactive Elements

**Timeline Slider:**
- Select any year from 2000-2023
- Dynamic filtering shows country-by-country coverage for selected year
- Year display updates in real-time

**Hover Popups:**
- Implemented using Mapbox popup-on-hover pattern
- Shows: country name, year, MCV1/MCV2 coverage, cases, deaths, population, region
- Smooth mouseenter/mouseleave interactions
- Dark theme styling matching globe aesthetic

**Visual Encoding:**
- **Circle Color:** Coverage rate (red = critical <50%, orange = low 50-70%, yellow = medium 70-85%, lime = good 85-95%, green = excellent >95%)
- **Circle Size:** Population (larger = more people)
- **Opacity & Glow:** Emphasizes high-burden areas

### Data Architecture

**Flattened Structure:**
- 1,440 features total (60 countries × 24 years)
- Each feature represents one country in one year
- Properties include: coverage, cases, deaths, population, region, income level
- Time series arrays stored as JSON strings for future chart integration

**Realistic Data Generation:**
- Based on WHO/UNICEF coverage estimates and measles surveillance data
- Models: regional trends, COVID-19 impact, income-based disparities
- Case and death calculations use epidemiological parameters

## Technical Implementation

### Web Learning Application

**Source:** Mapbox GL JS popup-on-hover example
**Pattern Applied:**
```javascript
// Single popup instance created before interactions
const popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false
});

// mouseenter: show popup
map.on('mouseenter', 'vaccine-circles', (e) => {
    map.getCanvas().style.cursor = 'pointer';
    popup.setLngLat(coordinates).setHTML(html).addTo(map);
});

// mouseleave: remove popup and reset cursor
map.on('mouseleave', 'vaccine-circles', () => {
    map.getCanvas().style.cursor = '';
    popup.remove();
});
```

**Key Techniques Learned:**
1. Create single popup instance before events to prevent flickering
2. Reuse popup instance (setLngLat/setHTML) instead of creating new ones
3. Coordinate handling for antimeridian crossing
4. Cursor styling changes on hover
5. Enable generateId: true on source for feature identification

### Technology Stack

- **Mapbox GL JS v3.0.1:** Globe projection, vector rendering
- **Shared Architecture:** Imports MAPBOX_CONFIG and LayerFactory from shared modules
- **Data Expressions:** Interpolated color scales, exponential population sizing
- **Filtering:** map.setFilter() for year-based display

### Performance

- Efficient rendering: filters 1,440 features to ~60 visible per year
- Smooth interactions: single popup reuse prevents DOM churn
- Globe rotation: gentle animation when not user-controlled
- Dark theme reduces eye strain for extended exploration

## Medical Context

### Measles Disease

**Transmission:** Airborne, one of most contagious diseases (R0 = 12-18)
**Herd Immunity Threshold:** 95% coverage required to prevent outbreaks
**Complications:** Pneumonia, encephalitis, death (especially children <5)
**Case Fatality Rate:** 1-3% in low-resource settings, higher during outbreaks

### Vaccination Strategy

**MCV1 (First Dose):** Given at 9-12 months in most countries
**MCV2 (Second Dose):** Given at 15-18 months or later
**Effectiveness:** Two-dose series >97% effective
**WHO Target:** ≥95% coverage with two doses in every district

### Impact of Coverage Gaps

- **90% coverage:** Outbreaks still occur, vulnerable populations at risk
- **80% coverage:** Regular outbreaks in susceptible subgroups
- **70% coverage:** Endemic transmission continues
- **<50% coverage:** High endemic burden, frequent epidemics

## Future Iteration Possibilities

**Iteration 2 (Intermediate):**
- Add auto-play timeline animation
- Show trend indicators (up/down arrows) for coverage changes
- Regional filtering buttons

**Iteration 3 (Advanced):**
- Country detail panels with Chart.js time series graphs
- Outbreak event markers (major epidemics)
- Comparison mode (two years side-by-side)

**Iteration 4 (Expert):**
- Herd immunity threshold overlay (95% line)
- Predictive modeling: future outbreaks based on coverage gaps
- API integration with WHO/UNICEF live data
- Animated transitions between years showing coverage waves

## Data Sources & Methodology

**Based on:**
- WHO/UNICEF Estimates of National Immunization Coverage (WUENIC)
- WHO Measles Surveillance Data
- Global Burden of Disease Study
- World Bank Development Indicators

**Note:** Data in this visualization is synthetically generated for demonstration purposes, using realistic parameters from authoritative sources. Actual coverage estimates, case counts, and mortality data should be obtained from WHO and national health authorities for real-world analysis.

## Usage

Open `index.html` in a modern web browser (Chrome, Firefox, Safari, Edge). Use the timeline slider to explore vaccination coverage across different years. Hover over countries to see detailed statistics. Rotate and zoom the globe to focus on regions of interest.

---

**Iteration:** 1 of infinite (Foundation Level)
**Disease:** Measles (MCV1/MCV2)
**Countries:** 60
**Time Period:** 2000-2023
**Web Source:** https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/
**Pattern Applied:** Hover popup with mouseenter/mouseleave events
