jeffemmett
/
infinite-agents-public
mirror of https://github.com/Jeff-Emmett/infinite-agents-public.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
infinite-agents-public/mapbox_test/mapbox_globe_7/README.md

7.8 KiB
Raw Permalink Blame History

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

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

function filterByYear(yearIndex) {
    map.setFilter('education-circles', ['==', 'yearIndex', yearIndex]);
    map.setFilter('education-labels', ['==', 'yearIndex', yearIndex]);
    updateStatistics(yearIndex);
}

Growth Rate Calculation

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

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