8.6 KiB

Raw Blame History

COVID-19 Vaccination Timeline - Global Equity Analysis

Advanced Vaccine Time Series Visualization with Dual-Axis Chart.js Charts

Overview

This visualization tells the story of COVID-19 vaccination equity from 2020-2023, revealing stark disparities between high-income and low-income nations. Using dual-axis Chart.js charts, it demonstrates the relationship between vaccination coverage and COVID-19 case reduction across different income levels.

Key Insights

High-Income Nations: Achieved 75%+ coverage by 2022, early vaccine access
Low-Income Nations: Struggled to reach 25% coverage due to COVAX challenges
Equity Gap: Dramatic difference in vaccine availability between wealthy and poor countries
Case Reduction: Clear correlation between vaccination rates and declining cases in high-income countries

Technical Features

1. Dual-Axis Chart.js Charts (Advanced)

Implementation based on Chart.js cartesian axes documentation:

// Dual-axis configuration from Chart.js cartesian axes documentation
scales: {
    // LEFT Y-AXIS: Vaccination Coverage (0-100%)
    y: {
        type: 'linear',
        position: 'left',
        title: {
            display: true,
            text: 'Coverage (%)'
        },
        min: 0,
        max: 100
    },
    // RIGHT Y-AXIS: COVID-19 Cases (dynamic range)
    y1: {
        type: 'linear',
        position: 'right',
        grid: {
            drawOnChartArea: false  // Prevent grid overlap
        }
    }
}

Key Technical Details:

yAxisID: 'y' for coverage dataset (left axis)
yAxisID: 'y1' for cases dataset (right axis)
Different data ranges: 0-100% vs dynamic case counts
Prevents grid line overlap with drawOnChartArea: false
Independent scales for optimal data visualization

2. Chart Instance Management

Performance-optimized chart lifecycle:

let activeChart = null;
let chartCounter = 0;
let popupTimeout = null;

// Destroy old chart before creating new one
if (activeChart) {
    activeChart.destroy();
    activeChart = null;
}

// 200ms delay prevents flickering
popupTimeout = setTimeout(() => {
    const ctx = canvas.getContext('2d');
    activeChart = new Chart(ctx, {...});
}, 200);

3. Full Timeline Controls

Play/Pause: Auto-advance through years
Reset: Jump back to 2020
Loop Toggle: Continuous playback option
Manual Slider: Direct year selection
Global Statistics: Real-time coverage and case counts

4. Realistic COVID-19 Data Model

Income-stratified vaccination rollout:

// High-income: rapid vaccination, early access
coverageByYear = [2, 68, 82, 88];  // 2020: minimal, 2021: rapid rollout

// Low-income: COVAX challenges, minimal early access
coverageByYear = [0, 8, 18, 24];   // Dramatic inequality

Case reduction patterns:

High-income: Sharp decline after 2021 vaccination surge
Low-income: Prolonged case burden due to limited vaccine access

5. Shared Architecture Integration

Uses centralized Mapbox configuration:

MAPBOX_CONFIG for token management and validation
LayerFactory for optimized circle layers with data-driven styling
Medical atmosphere preset for COVID-19 theme

Data Story

Timeline Breakdown

2020: Pandemic Begins

Global coverage: ~1%
No vaccines available yet
Cases surging worldwide

2021: Vaccine Rollout (Inequitable)

High-income: 68% average coverage
Low-income: Only 8% coverage
COVAX struggles to deliver equitable access

2022: Rich Countries Plateau

High-income: 82% coverage, cases declining
Low-income: Still only 18% coverage
Equity gap widens

2023: Ongoing Disparity

High-income: 88% coverage, low case counts
Low-income: 24% coverage, continued health burden
Lessons about global health equity

Countries by Income Level

High-Income (rapid vaccination):

United States, United Kingdom, Germany, France, Japan
Canada, Australia, South Korea, Israel, Singapore

Upper-Middle Income (moderate pace):

Brazil, China, Russia, Mexico, Turkey, South Africa
Argentina, Thailand

Lower-Middle Income (slower rollout):

India, Indonesia, Egypt, Pakistan, Bangladesh
Nigeria, Philippines, Vietnam, Kenya

Low-Income (COVAX challenges):

Ethiopia, Tanzania, Uganda, Mozambique
Madagascar, Malawi, Chad, Haiti

Web Learning Application

Assigned URL: https://www.chartjs.org/docs/latest/axes/cartesian/

Techniques Learned and Applied:

Multiple Y-Axes Configuration
- Bind datasets to specific axes using yAxisID
- Match dataset.yAxisID to scale definitions in options
Axis Positioning
- position: 'left' for coverage axis
- position: 'right' for cases axis
- Independent positioning allows side-by-side comparison
Scale Type Declaration
- Must explicitly declare type: 'linear' for both axes
- Default types not used in multi-axis scenarios (per documentation)
Grid Overlap Prevention
- While drawOnChartArea wasn't in the fetched documentation
- Implementation follows Chart.js best practices to prevent visual clutter

File Structure

vaccine_timeseries_3_covid/
├── index.html          # Complete visualization with dual-axis charts
├── README.md           # This file - COVID-19 equity analysis
└── CLAUDE.md           # Technical documentation and implementation guide

Usage

Open index.html in a modern web browser
Wait for globe to load with country data points
Hover over any country to see dual-axis chart popup
Use timeline controls to explore 2020-2023 progression
Click Play to auto-advance through years
Observe equity gaps between high-income and low-income nations

Technical Stack

Mapbox GL JS v3.0.1: Globe visualization with projection
Chart.js v4.4.0: Dual-axis time series charts
Shared Architecture: Centralized configuration and layer factory
ES6 Modules: Clean imports and code organization

Key Visualizations

Dual-Axis Chart Features

Line Chart (Coverage): Smooth line showing vaccination progress with area fill
Bar Chart (Cases): Dramatic visual of case counts by year
Color Coding: Green (coverage) vs Red (cases) for clear distinction
Interactive Tooltips: Hover to see exact values with proper formatting
Responsive Legend: Bottom placement with point style indicators

Globe Features

Color Scale: Red (0%) → Yellow (50%) → Green (100%)
Size Scale: Proportional to population (6-35px radius)
Opacity: Zoom-responsive for better detail at high zoom
Atmosphere: Medical theme with subtle blue glow
Rotation: Gentle auto-spin when not interacting

Performance Optimizations

Chart Cleanup: Destroy previous chart instances before creating new ones
Popup Delay: 200ms timeout prevents flickering on rapid mouse movement
Timeout Clearing: Cancel pending popups when leaving features
Unique Canvas IDs: Counter-based IDs prevent DOM conflicts
RequestAnimationFrame: Ensures canvas is ready before chart creation

Health Equity Insights

This visualization reveals critical lessons about global health equity:

Wealth Determines Health: High-income countries secured vaccines first through bilateral deals
COVAX Limitations: Initiative to ensure equitable access faced funding and supply challenges
Ongoing Disparities: Even in 2023, low-income countries lag far behind in coverage
Public Health Impact: Lower vaccination rates correlate with prolonged case burden

Future Enhancements

Potential additions for deeper analysis:

Deaths Data: Add third axis or overlay for COVID-19 mortality
Vaccine Types: Show different vaccines (Pfizer, Moderna, AstraZeneca, etc.)
Booster Doses: Track additional doses beyond primary series
Regional Comparisons: Compare continents or WHO regions
Supply Chain Data: Visualize vaccine shipments and donations

Credits

Web Learning Source: Chart.js Cartesian Axes Documentation Architecture: Shared Mapbox configuration and LayerFactory Data Model: Realistic COVID-19 vaccination patterns by income level Visualization: Advanced dual-axis Chart.js implementation

Generated with Advanced Web Learning Part of the Infinite Agentic Loop demonstration project showcasing progressive web-based learning and sophisticated data visualization techniques.

8.6 KiB Raw Blame History