🌍 Mapbox Globe Visualizations

Progressive Web-Enhanced Learning Series

⚠️ Setup Required

Before viewing the globes:

  1. Get a free Mapbox token at account.mapbox.com
  2. For each globe you want to view, edit src/index.js and replace the access token on line 5
  3. Start this server: python -m http.server 8000
  4. Click any globe below to view it!
GLOBE 1
Global Population
🏙️ Demographic Distribution
Visualizes 100 major cities worldwide with population-based sizing and color coding. Features auto-rotating globe with smooth interactions and hover popups.
100 cities
37.4M max pop
Techniques
Circle Layer Globe Projection Atmosphere
View Globe →
GLOBE 2
Temperature Anomalies
🌡️ Climate Change Patterns
Heatmap showing global temperature deviations from historical averages. Dual-layer approach reveals both global patterns and local detail. Clearly shows Arctic amplification.
280 stations
+3.6°C max anomaly
Techniques
Heatmap Layer Dual Layer Diverging Colors
View Globe →
GLOBE 3
Economic Dashboard
💰 Multi-Dimensional Economic Data
Interactive economic visualization with 4 metrics per country. Switch between 16 different metric combinations using advanced Mapbox expressions. Preset views reveal global economic patterns.
120 countries
16 combinations
Techniques
Expressions Multi-Metric Dynamic UI
View Globe →
GLOBE 4
Digital Infrastructure
🌐 Internet & Tech Hub Network
Most sophisticated visualization with 4 simultaneous layers: country fills, tech hub circles, connection lines, and city labels. Toggle layers, filter by region, and adjust opacity independently.
100+ countries
80 tech hubs
4 layers
Techniques
Multi-Layer Choropleth Layer Control Filtering
View Globe →