225 lines
8.9 KiB
Markdown
225 lines
8.9 KiB
Markdown
# 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](https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/)
|
|
|
|
### 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:
|
|
```javascript
|
|
'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)
|
|
```bash
|
|
# 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](https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/)
|
|
|
|
## 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
|