From c6ed713187b16175ee47be71a0e5e487d38381a3 Mon Sep 17 00:00:00 2001 From: Shawn Anderson Date: Thu, 9 Oct 2025 18:05:03 -0700 Subject: [PATCH] Add Mapbox globe gallery index page for easy navigation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Creates interactive gallery showcasing all 4 globe visualizations with: - Card-based layout with descriptions and stats - Visual hierarchy showing progressive complexity - Setup instructions for Mapbox token - Click-through navigation to each globe - Responsive grid design with hover effects Makes it easy to browse and access all generated globes from one page. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- mapbox_test/index.html | 364 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 364 insertions(+) create mode 100644 mapbox_test/index.html 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 →
+
+ +
+ + +
+ +