# Globe Visualization 7: Global Online Education Growth Timeline

## Overview

An interactive 3D globe visualization showcasing the explosive growth of online education platforms worldwide from 2010 to 2024. Features timeline animation controls for temporal exploration of MOOC platforms, online universities, and educational centers.

## Web-Enhanced Learning

### Source Documentation
**URL:** https://docs.mapbox.com/mapbox-gl-js/example/timeline-animation/

**Topic:** Timeline Animation and Temporal Data Visualization

### Key Techniques Learned and Applied

1. **Temporal Data Preprocessing**
   - Transformed nested year-based data into flat feature collection
   - Added yearIndex property for efficient filtering
   - Calculated derived metrics (growth rates) during preprocessing

2. **Range Slider Timeline Control**
   - Implemented manual timeline scrubbing with HTML range input
   - Synchronized slider position with year display
   - Enabled direct temporal navigation through user interaction

3. **Time-Based Layer Filtering**
   - Used `map.setFilter()` for efficient temporal filtering
   - Applied exact-match filters: `['==', 'yearIndex', yearIndex]`
   - Filtered multiple layers simultaneously (circles and labels)

4. **Playback Animation System**
   - Built play/pause functionality for automatic timeline progression
   - Managed animation state with interval-based updates
   - Auto-pause on manual scrubbing for better UX

5. **Aggregate Statistics Calculation**
   - Real-time calculation of global metrics per year
   - Dynamic updates synchronized with timeline position
   - Year-over-year growth rate analysis

## Theme: Global Online Learning Platform Growth

Visualizes the transformation of education through online platforms:

- **80+ Education Platforms** spanning 6 continents
- **Multi-year temporal data** (2010-2024, 8 time points)
- **Platform Types:** MOOC platforms, online universities, professional training, tech bootcamps
- **Metrics Tracked:** Enrollment numbers, course offerings, completion rates, YoY growth

## Features

### Interactive Timeline Animation
- **Range Slider Control:** Manual scrubbing through years
- **Play/Pause Animation:** Automatic progression through timeline
- **Year Display:** Clear temporal context
- **Auto-pause on Scrub:** Smart interaction handling

### Visual Encoding
- **Circle Size:** Proportional to enrollment (exponential scale)
- **Circle Color:** Growth rate gradient
  - Red: Decline
  - Yellow: Stable growth (0-50%)
  - Light Green: Moderate growth (50-100%)
  - Green: Strong growth (100-200%)
  - Blue: Explosive growth (>200%)
- **White Stroke:** Highlights platforms with 10M+ enrollments

### Real-Time Statistics Panel
- Total Global Enrollment
- Total Course Offerings
- Active Platform Count
- Average Completion Rate
- Updates dynamically with timeline

### Interactive Popups
- Platform name and type
- Country location
- Current year metrics
- Year-over-year growth percentage
- Color-coded growth indicators

### Auto-Rotation
- Smooth globe rotation when idle
- Pauses during user interaction
- Enhances exploration experience

## Technical Implementation

### Data Structure
```javascript
// Original nested structure
{
  properties: {
    yearData: {
      "2010": { enrollment, courses, completionRate },
      "2012": { ... }
    }
  }
}

// Processed flat structure
{
  properties: {
    year: "2014",
    yearIndex: 2,
    enrollment: 12000000,
    growthRate: 85
  }
}
```

### Timeline Filtering Pattern
```javascript
function filterByYear(yearIndex) {
    map.setFilter('education-circles', ['==', 'yearIndex', yearIndex]);
    map.setFilter('education-labels', ['==', 'yearIndex', yearIndex]);
    updateStatistics(yearIndex);
}
```

### Growth Rate Calculation
```javascript
function calculateGrowthRate(yearData, currentYear, yearIndex) {
    if (yearIndex === 0) return 0;
    const prevYear = years[yearIndex - 1];
    const currentEnrollment = yearData[currentYear].enrollment;
    const prevEnrollment = yearData[prevYear].enrollment;
    return Math.round(((currentEnrollment - prevEnrollment) / prevEnrollment) * 100);
}
```

## Data Highlights

### Major Platforms Featured
- **Coursera** (USA): 0 → 136M enrollments (2012-2024)
- **edX** (USA): 0 → 55M enrollments
- **XuetangX** (China): 0 → 58M enrollments
- **Udemy** (USA): 100K → 75M enrollments
- **Khan Academy** (USA): 2M → 32M enrollments
- **Byju's** (India): 0 → 50M enrollments
- **NetEase Cloud** (China): 1M → 78M enrollments

### Global Trends Visible
1. **MOOC Explosion (2012-2016):** Rapid platform launches
2. **Asian Market Growth (2014-2020):** China and India platforms surge
3. **COVID-19 Impact (2020):** Massive enrollment spikes globally
4. **Maturation Phase (2022-2024):** Steadier growth, market consolidation

## Improvements Over Previous Iterations

### New Capabilities
1. **Timeline Animation:** First iteration with temporal exploration
2. **Playback Controls:** Automated timeline progression
3. **Manual Scrubbing:** Direct year selection via slider
4. **Growth Rate Analysis:** Year-over-year comparison metrics
5. **Aggregate Statistics:** Real-time global calculations
6. **Multi-Year Data:** 8 temporal snapshots per platform

### Technical Advances
- Data preprocessing for efficient filtering
- Dual layer filtering (circles + labels)
- Synchronized UI state management
- Conditional label visibility (5M+ threshold)
- Exponential size scaling for better visual hierarchy

## How to Run

### Option 1: Local Server
```bash
cd mapbox_globe_7
python -m http.server 8000
# Open http://localhost:8000
```

### Option 2: Live Server (VS Code)
1. Install "Live Server" extension
2. Right-click `index.html`
3. Select "Open with Live Server"

### Option 3: Direct File Access
Open `index.html` directly in a modern browser (Chrome, Firefox, Safari)

## Usage Instructions

1. **Timeline Scrubbing:** Drag the slider to explore different years
2. **Automatic Playback:** Click "Play" to animate through timeline
3. **Manual Navigation:** Click slider track to jump to specific year
4. **Platform Details:** Hover over circles for detailed popups
5. **Globe Navigation:** Click-drag to rotate, scroll to zoom
6. **Statistics:** Watch aggregate metrics update with timeline

## Technical Stack

- **Mapbox GL JS v3.0.1** - Globe projection and rendering
- **GeoJSON** - Temporal education platform data
- **Vanilla JavaScript** - Timeline control logic
- **CSS3** - Modern UI styling with gradients and blur effects

## Data Sources

- Platform enrollment data: Industry reports and public filings
- Course offerings: Platform websites and press releases
- Completion rates: Academic research and platform statistics
- Growth calculations: Year-over-year analysis

## Browser Compatibility

- Chrome 90+ (recommended)
- Firefox 88+
- Safari 14+
- Edge 90+

Requires WebGL support and modern JavaScript features.

## Future Enhancements

1. **Subject Category Breakdown:** Course type distribution
2. **Regional Filtering:** Continent-specific views
3. **Platform Comparison Mode:** Side-by-side metric analysis
4. **Export Timeline:** Video/GIF export of animation
5. **Data Download:** CSV export of temporal data
6. **Custom Date Ranges:** User-defined timeline segments

## Learning Outcomes

This iteration successfully demonstrates:
- Timeline animation pattern from Mapbox examples
- Temporal data preprocessing techniques
- Filter-based animation approach
- Range slider integration with map state
- Real-time metric calculation
- Multi-layer temporal filtering
- Growth rate visualization strategies

The timeline animation pattern learned from Mapbox documentation proved highly effective for exploring temporal trends in global online education adoption.

---

**Iteration:** 7
**Theme:** Online Education Growth
**Complexity:** Intermediate/Advanced
**Data Points:** 80 platforms × 8 years = 640 temporal features
**Web Source:** Mapbox Timeline Animation Example
**Generated:** 2025-10-09
