infinite-agents-public/mapbox_test/mapbox_globe_9

Globe Visualization 9: Global Educational Funding & Teacher Training

Overview

This iteration showcases a sophisticated choropleth-style visualization of global educational funding metrics combined with teacher training center locations. The visualization applies advanced data-driven styling techniques learned from Mapbox GL JS documentation to create a multi-layered analysis of education systems worldwide.

Web Research & Learning

Primary Source

URL: Mapbox GL JS - Update a choropleth layer by zoom level

Key Techniques Learned & Applied

1. Interpolate Expression for Continuous Color Scaling

   • Learned the interpolate + linear expression pattern for creating smooth color gradients
   • Applied to create viridis-style color scale based on spending per capita
   • Syntax pattern:

     'fill-color': [
         'interpolate',
         ['linear'],
         ['get', 'spendingPerCapita'],
         0, '#440154',      // Deep purple
         500, '#31688e',    // Blue
         1000, '#35b779',   // Green
         2000, '#fde724'    // Yellow
     ]
     

2. Data-Driven Property Access

   • Learned how to use ['get', 'propertyName'] to access feature properties
   • Applied to multiple visual variables: circle size, color, and stroke

3. Multi-Stop Color Ramps

   • Understood how to create professional color scales with multiple stops
   • Applied viridis color palette (purple → blue → green → yellow) for perceptual uniformity
   • Ensures accessibility and clear data communication

4. Layered Choropleth Approach

   • While traditional choropleths use fill polygons, adapted the technique for point data
   • Created circle-based choropleth with size and color encoding
   • Overlaid secondary data layer (training centers) for multi-dimensional analysis

Visualization Features

Primary Layer: Educational Funding Choropleth

• 180+ countries with education spending data
• Circle size: Scales with spending per capita ($0-$5,000+)
• Circle color: Interpolated choropleth colors showing funding levels
  • Deep purple (#440154): Critical funding ($0-500)
  • Blue (#31688e): Low funding ($500-1,000)
  • Green (#35b779): Medium funding ($1,000-2,000)
  • Yellow (#fde724): High funding ($2,000+)
• Circle stroke: Color-coded by education quality index
  • Red: Low quality (< 0.6)
  • Orange: Medium quality (0.6-0.8)
  • Green: High quality (> 0.8)

Secondary Layer: Teacher Training Centers

• 300+ training centers distributed globally
• Red point markers with halo effect
• Capacity, program type, and establishment year data
• Proportional to country investment in teacher development

Interactive Features

• Rich hover popups with comprehensive metrics:
  • Spending per capita with global rank
  • Budget percentage allocation
  • Average teacher salary
  • Teacher-student ratios
  • Education quality index
  • Training center count
  • Funding gap classification
  • Efficiency score calculation
• Click-to-fly: Navigate to countries with smooth camera animation
• Layer toggles: Show/hide training centers and labels
• Top 10 leaderboard: Interactive ranking of highest-spending countries
• Auto-rotation: Gentle globe spin when idle

Data Processing & Analysis

Advanced Metrics Calculated:

1. Funding Gap Classification: Critical / High / Moderate / Low
2. Efficiency Score: Education index per $1,000 spent
3. Salary Gap Analysis: Teacher compensation tiers
4. Global Rankings: Countries sorted by spending
5. Statistical Aggregates: Mean, max, min spending across all countries

Data Coverage:

• All continents represented
• Developed and developing nations
• Range: $60 (Somalia) to $5,280 (Luxembourg) per capita
• Realistic correlations between spending, salaries, and outcomes

Technical Implementation

Mapbox Expressions Used

• Interpolate: Continuous color and size scaling
• Get: Property value access
• Case/Step: Conditional formatting
• Zoom-based opacity: Labels fade in at higher zoom levels

Performance Optimizations

• Efficient GeoJSON data structure
• Single-pass data processing
• Optimized rendering with appropriate layer ordering
• Smooth 60fps rotation animation

Globe Projection Features

• Dark theme optimized for data visibility
• Custom fog configuration with space-color and star-intensity
• Smooth camera transitions with pitch and bearing
• Navigation controls for user exploration

Data Sources

Educational Funding Metrics (Simulated but Realistic):

• Education spending per capita (USD)
• Budget percentage allocation to education
• Average teacher salaries
• Teacher-student ratios
• Education quality index (0-1 scale)
• Teacher training center counts

Geographic Coverage:

• 180+ countries across 6 continents
• Representative sample of economic development levels
• Accurate latitude/longitude coordinates

Improvement Over Previous Iterations

Iteration 9 Advances:

1. Choropleth Technique: First iteration to apply true choropleth data-driven styling with interpolate expressions
2. Multi-Layer Analysis: Combines country-level choropleth with point overlay (training centers)
3. Sophisticated Color Science: Uses perceptually uniform viridis palette for accessibility
4. Advanced Data Processing: Calculates derived metrics (efficiency, rankings, gaps)
5. Rich Interactivity: Dual-layer tooltips, click navigation, layer controls
6. Professional UI: Stats dashboard, legend, top-10 leaderboard, controls
7. Educational Theme: Addresses real-world data visualization challenge (global education funding)

Technical Progression:

• From basic point maps → choropleth with multi-stop color ramps
• From single-layer → multi-layer compositing
• From simple popups → comprehensive data dashboard
• From static → interactive with toggles and navigation

How to Run

Local Server (Recommended)

# Navigate to iteration directory
cd mapbox_test/mapbox_globe_9/

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# Node.js
npx http-server -p 8000

Then open: http://localhost:8000

Direct File

Simply open index.html in a modern browser (Chrome, Firefox, Safari, Edge)

Browser Compatibility

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Requires WebGL support for Mapbox GL JS

Key Insights from Visualization

Global Patterns Revealed:

1. Nordic Excellence: Scandinavian countries lead in per-capita spending ($3,000-4,000+)
2. Resource-Rich Disparity: Gulf states spend heavily but have lower education indices
3. Efficiency Champions: Some developing nations achieve high education indices with modest spending
4. Sub-Saharan Challenge: Lowest spending region ($60-300/capita) with highest teacher-student ratios
5. Training Center Distribution: Correlates strongly with overall education investment

Data Stories:

• Luxembourg: Highest spending ($5,280) with excellent outcomes
• Norway: High spending ($4,280) with best teacher-student ratios (1:10)
• Cuba: Exceptional education index (0.83) despite modest spending ($920)
• Somalia: Critical funding gap ($60) with 62:1 teacher-student ratio
• Singapore: Top education index (0.95) with strategic spending ($4,280)

Future Exploration Opportunities

Potential Enhancements:

1. Time-series animation showing funding trends 2000-2024
2. 3D extrusions of countries based on total education budget
3. Flow lines showing teacher migration patterns
4. Clustering of training centers at lower zoom levels
5. Comparative analysis mode (select two countries)
6. Real-time data integration from UNESCO or World Bank APIs
7. Filter controls for regions, income levels, or quality tiers
8. Export functionality for data analysis

Web Source Attribution

This iteration's choropleth implementation is directly inspired by and adapted from the Mapbox GL JS choropleth documentation. The core technique of using interpolate expressions with linear interpolation and data-driven get operations was learned from official Mapbox examples and applied to the globe projection context with educational funding data.

Source: Mapbox GL JS - Update a choropleth layer by zoom level

Iteration Metadata

• Iteration Number: 9
• Theme: Global Educational Funding & Teacher Training
• Complexity: Intermediate/Advanced
• Primary Technique: Choropleth with interpolate expressions
• Data Points: 180+ countries, 300+ training centers
• Layers: 5 (choropleth circles, training centers, halos, labels, controls)
• Interactivity: High (hover, click, toggles, leaderboard)
• Web Learning Applied: Mapbox data-driven styling with interpolate
• Globe Features: Auto-rotation, fog, dark theme, smooth navigation

---

Generated with web-enhanced learning | Mapbox GL JS v3.0.1 | Globe Projection