infinite-agents-public/mapbox_test/mapbox_globe_4

Globe Visualization 4: Global Digital Infrastructure

Multi-Layer Mapbox Globe Visualization - Iteration 4

This is the fourth iteration in a progressive learning series demonstrating advanced Mapbox GL JS techniques with globe projection. This iteration synthesizes all previous learnings and introduces multi-layer composition with choropleth maps.

🌍 Theme: Global Digital Infrastructure & Connectivity

This visualization showcases the global digital landscape by combining multiple data layers:

• Internet penetration rates by country (choropleth/fill layer)
• Major tech hubs and internet exchange points (circle layer)
• International connectivity links between major hubs (line layer)
• City labels for top-tier tech centers (symbol layer)

📚 Learning Progression

Previous Iterations:

1. Iteration 1: Population circles - Single layer visualization with basic circle styling
2. Iteration 2: Temperature heatmap - Single layer with heatmap type and color gradients
3. Iteration 3: Economic data-driven styling - Advanced expressions and conditional styling
4. Iteration 4 (this): Multi-layer composition synthesizing all techniques

🔬 Web-Enhanced Learning

Research Source: Mapbox GL JS Choropleth Documentation URL: https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/

Key Choropleth Techniques Learned:

1. Fill Layer Configuration

   • Using type: 'fill' for geographic region visualization
   • Applying filters to show/hide specific features
   • Managing multiple fill layers with different zoom levels

2. Data-Driven Styling

   • interpolate expressions for smooth color gradients
   • Linear color scales mapping data values to visual properties
   • Dynamic paint properties based on feature attributes

3. Layer Composition

   • Combining fill, circle, line, and symbol layers
   • Managing layer order and visibility
   • Coordinating opacity across multiple layers

4. Interactive Features

   • Zoom-based layer visibility
   • Dynamic legend updates
   • Filter-based layer management

🎨 Multi-Layer Architecture

Layer 1: Country Choropleth (Fill as Circles)

• Data: 100+ countries with internet penetration percentages
• Styling: Color interpolation from red (low) to green (high)
• Features: Data-driven circle sizing based on population
• Expression: Linear interpolation across 8 color stops (0-100%)

Layer 2: Tech Hub Circles

• Data: 80 major tech cities and internet exchange points
• Styling: Size based on importance score (4-18px radius)
• Colors:
  • Tech Hubs: #4ecdc4 (cyan)
  • Internet Exchanges: #ff6b6b (red)
• Expression: Categorical matching for hub types

Layer 3: Connection Lines

• Data: International links between Tier 1 hubs (importance ≥ 85)
• Styling: Gradient lines with data-driven width
• Features: Line gradient from cyan to green
• Expression: Width based on connection strength (400-1000 range)

Layer 4: City Labels

• Data: Labels for top tech hubs (importance ≥ 75)
• Styling: Size scaled by importance (10-14px)
• Features: White text with black halo for readability

🎛️ Advanced Features

Interactive Controls

Layer Toggles:

• Show/hide countries, cities, connections, and labels independently
• Real-time layer visibility management

Filter Controls:

• Region Filter: View specific continents (6 regions + all)
• Metric Filter: Switch between internet penetration and digital index
• Dynamic legend updates based on selected metric

Opacity Sliders:

• Independent opacity control for each layer type
• Real-time visual feedback with percentage display
• Range: 0-100% for fine-tuned transparency

Visual Design

Color Schemes:

• Internet Penetration: 8-stop gradient (red → yellow → green)
• Digital Index: 4-stop grayscale gradient
• Tech Hubs: Cyan for hubs, red for exchanges
• Connections: Cyan-to-green gradient lines

Globe Features:

• Atmosphere with space-color and star-intensity
• Auto-rotation when not interacting
• Smooth transitions between data views

Data Visualization

Country Data (100+ countries):

• Internet penetration: 15-99%
• Digital infrastructure index: 25-95
• Population: 1.2M - 1.4B
• Regional grouping: 6 regions

City Data (80 tech hubs):

• Tier 1 (90-100): 8 global capitals
• Tier 2 (75-89): 16 major centers
• Tier 3 (60-74): 26 emerging cities
• Tier 4 (45-59): 30 regional centers

Connection Network:

• Automatic generation between Tier 1 hubs
• Cross-country connections only
• Strength-based line width

🔧 Technical Implementation

Multi-Layer Composition Pattern

// Layer ordering (bottom to top):
1. country-fills (choropleth base)
2. hub-connections (lines)
3. tech-hubs (circles)
4. city-labels (symbols)

Data-Driven Expression Examples

Choropleth Color Interpolation:

'circle-color': [
  'interpolate',
  ['linear'],
  ['get', 'internetPenetration'],
  0, '#cc0000',    // Dark red
  30, '#ff3300',   // Red-orange
  50, '#ff9900',   // Orange
  70, '#33cc33',   // Light green
  90, '#004d00'    // Dark green
]

Size-Based Scaling:

'circle-radius': [
  'interpolate',
  ['linear'],
  ['get', 'importance'],
  45, 4,   // Small cities
  75, 9,   // Medium cities
  100, 18  // Major hubs
]

Categorical Styling:

'circle-color': [
  'match',
  ['get', 'type'],
  'Internet Exchange', '#ff6b6b',
  'Tech Hub', '#4ecdc4',
  '#95e1d3'  // fallback
]

Filter Implementation

Region-Based Filtering:

// Countries
map.setFilter('country-fills', ['==', ['get', 'region'], region]);

// Cities (join with country data)
const regionCountries = countriesData.features
  .filter(f => f.properties.region === region)
  .map(f => f.properties.country);
map.setFilter('tech-hubs', ['in', ['get', 'country'], ['literal', regionCountries]]);

📊 Statistics Dashboard

Global Metrics Display:

• Total countries: 100+
• Average internet penetration: ~66%
• Total tech hubs: 80
• Tier 1 hubs: 8
• International links: Dynamic count

🎯 Synthesis of Learning

This visualization demonstrates cumulative mastery of:

1. From Iteration 1: Circle layer fundamentals, basic styling, globe projection
2. From Iteration 2: Color gradients, data-driven opacity, visual layering
3. From Iteration 3: Advanced expressions, conditional styling, property matching
4. New in Iteration 4:
   • Multi-layer composition and ordering
   • Choropleth/fill techniques adapted for circles
   • Layer visibility management
   • Cross-layer filtering and coordination
   • Multiple simultaneous data sources
   • Advanced UI control integration

🚀 Usage

1. Open index.html in a modern web browser
2. Use layer toggles to show/hide different visualization layers
3. Apply region filters to focus on specific continents
4. Switch metrics to view different country-level data
5. Adjust opacity sliders for optimal visual composition
6. Click countries or cities for detailed information
7. Let the globe auto-rotate or interact manually

📁 Project Structure

mapbox_globe_4/
├── index.html              # Main visualization page
├── src/
│   ├── index.js           # Multi-layer orchestration logic
│   └── data/
│       ├── countries-data.js   # 100+ countries with metrics
│       └── cities-data.js      # 80 tech hubs with connections
├── README.md              # This documentation
└── CLAUDE.md             # Development context

🎓 Key Takeaways

Multi-Layer Mastery:

• Successfully combined 4 different layer types (circle, line, symbol)
• Implemented coordinated visibility and opacity controls
• Created dynamic filtering across multiple data sources

Choropleth Techniques:

• Adapted fill layer concepts to circle-based visualization
• Implemented smooth color interpolation for data representation
• Created responsive legends that update with metric changes

Advanced Interactivity:

• Layer-specific controls with real-time feedback
• Cross-layer filtering maintaining data relationships
• Comprehensive popup information for both countries and cities

Design Excellence:

• Professional dark theme with glassmorphism effects
• Gradient-based connection visualization
• Sophisticated color schemes for multiple data dimensions

---

This iteration represents the culmination of progressive Mapbox learning, combining single-layer mastery with multi-layer composition to create a comprehensive, interactive global visualization.