diff --git a/mapbox_test/index.html b/mapbox_test/index.html new file mode 100644 index 0000000..47f2827 --- /dev/null +++ b/mapbox_test/index.html @@ -0,0 +1,364 @@ + + + + + + Mapbox Globe Visualizations Gallery + + + +
+
+

🌍 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. +
  2. For each globe you want to view, edit src/index.js and replace the access token on line 5
    3. +
  3. Start this server: python -m http.server 8000
    4. +
  4. Click any globe below to view it!
    5. +
+
+ +
+ + +
+
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 →
+
+ +
+ + +
+ +