8.5 KiB

Raw Blame History

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:

Iteration 1: Population circles - Single layer visualization with basic circle styling
Iteration 2: Temperature heatmap - Single layer with heatmap type and color gradients
Iteration 3: Economic data-driven styling - Advanced expressions and conditional styling
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:

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
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
Layer Composition
- Combining fill, circle, line, and symbol layers
- Managing layer order and visibility
- Coordinating opacity across multiple layers
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:

From Iteration 1: Circle layer fundamentals, basic styling, globe projection
From Iteration 2: Color gradients, data-driven opacity, visual layering
From Iteration 3: Advanced expressions, conditional styling, property matching
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

Open index.html in a modern web browser
Use layer toggles to show/hide different visualization layers
Apply region filters to focus on specific continents
Switch metrics to view different country-level data
Adjust opacity sliders for optimal visual composition
Click countries or cities for detailed information
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.

8.5 KiB Raw Blame History