jeffemmett
/
infinite-agents-public
mirror of https://github.com/Jeff-Emmett/infinite-agents-public.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
infinite-agents-public/mapbox_test/mapbox_globe_2/CLAUDE.md

8.0 KiB
Raw Blame History

CLAUDE.md - Globe Visualization 2: Temperature Heatmap

Project Context

This is iteration 2 in a progressive Mapbox globe visualization learning series. Each iteration builds upon previous knowledge while introducing new web-learned techniques.

Learning Methodology: Web-Enhanced Progressive Development

Research Source

Techniques Extracted from Documentation

  1. Heatmap Weight System

    • Documentation showed how to use data properties to drive heatmap density
    • Applied to temperature anomalies: higher anomalies = higher weight
    • Interpolation from -1°C (0.1 weight) to +3°C (1.0 weight)

  2. Zoom-Based Intensity

    • Learned intensity multiplier varies by zoom level
    • Implemented 0.8 (global) → 1.2 (regional) → 1.5 (local)
    • Ensures visibility at all scales

  3. Color Gradient Configuration

    • Documentation demonstrated density-to-color mapping
    • Created diverging scheme: blue (cold) → green (neutral) → red (hot)
    • Applied to temperature anomaly visualization

  4. Radius Adaptation

    • Learned radius controls point influence spread
    • Configured 15-35px range based on zoom
    • Balances smoothness vs precision

  5. Layer Transitions

    • Documentation showed opacity management for layer switching
    • Implemented heatmap fade-out + circle fade-in
    • Seamless transition from density to detail view

Improvement Over Iteration 1

Iteration 1 Recap

  • 100 population circles sized/colored by population
  • Globe projection with auto-rotation
  • Basic circle layer visualization

Iteration 2 Advancements

  • 280 temperature anomaly stations
  • Primary heatmap layer for density visualization
  • Secondary circle layer for detail
  • Multi-scale visualization strategy
  • Climate-focused data theme
  • Zoom-responsive layer transitions

Why Heatmap > Circles for This Data

Circles (Iteration 1):

  • Good: Precise individual values
  • Limited: Pattern recognition requires mental work
  • Best for: Discrete entities (cities, points of interest)

Heatmap (Iteration 2):

  • Good: Immediate pattern recognition
  • Advanced: Shows regional trends and gradients
  • Best for: Continuous phenomena (temperature, density, intensity)

Technical Architecture

File Structure

mapbox_globe_2/
├── index.html              # Main page with UI panels
├── src/
│   ├── index.js           # Map initialization and heatmap configuration
│   └── data/
│       └── temperature-data.js  # 280 stations GeoJSON
├── README.md              # User documentation
└── CLAUDE.md              # This file - development context

Data Design

GeoJSON Features: Each station includes:

  • station: Location name
  • temperature: 2023 measured temperature
  • anomaly: Deviation from 1951-1980 baseline
  • baseline: Historical average temperature
  • year: Data year (2023)

Geographic Coverage:

  • North America: 20 stations
  • South America: 10 stations
  • Europe: 50 stations (showing high warming)
  • Asia: 40 stations (mixed patterns)
  • Middle East: 12 stations (extreme warming)
  • Africa: 30 stations
  • Oceania: 18 stations
  • Russia/Arctic: 20 stations (extreme warming)
  • Additional key locations: 80 stations

Heatmap Paint Properties Explained

// Weight: How much each point contributes
'heatmap-weight': Uses 'anomaly' property
  -1°C anomaly → 0.1 weight (minimal contribution)
  +3°C anomaly → 1.0 weight (maximum contribution)

// Intensity: Global multiplier by zoom
  Zoom 0: 0.8 (subtle at global view)
  Zoom 10: 1.5 (prominent at local view)

// Color: Density mapped to temperature gradient
  0 density: Transparent
  Low density: Blue (cooling)
  Medium density: Yellow (moderate warming)
  High density: Red (extreme warming)

// Radius: Point influence spread
  Zoom 0: 15px (broad patterns)
  Zoom 10: 35px (precise local density)

// Opacity: Layer visibility by zoom
  Zoom 0-7: 0.9 (heatmap dominant)
  Zoom 7-15: 0.9 → 0 (fade to circles)

Circle Layer Strategy

  • Activation: minzoom 7 (regional scale)
  • Purpose: Show individual stations when zoomed in
  • Radius: Based on anomaly magnitude (3-18px)
  • Color: Matches heatmap gradient for consistency
  • Opacity: 0 → 0.85 as heatmap fades
  • Stroke: White outline for visibility

Climate Data Patterns

The visualization reveals scientifically accurate patterns:

  1. Arctic Amplification: Polar regions +2.5°C to +3.6°C (documented phenomenon)
  2. Continental vs Oceanic: Land warming faster (thermal inertia effect)
  3. Latitude Gradient: Higher latitudes showing greater warming
  4. Regional Hotspots: Middle East, Central Asia, Mediterranean
  5. Tropical Moderation: Equatorial regions showing less warming

Development Notes

Design Decisions

  1. Dark Theme: Maximizes data visibility, reduces eye strain
  2. Diverging Colors: Blue-to-red familiar from climate visualizations
  3. Auto-Rotation: Reveals global patterns without user effort
  4. Smart Pause: Rotation stops during interaction, resumes after
  5. Dual Layers: Heatmap for patterns, circles for precision

Performance Optimizations

  • Heatmap rendering is GPU-accelerated via WebGL
  • GeoJSON pre-loaded (no async data fetching)
  • Layer visibility controlled by zoom (not rendering unused features)
  • Popup generation on-demand (not pre-rendered)

User Experience Enhancements

  • Legend: Color scale shows anomaly meaning
  • Statistics: Aggregate data provides context
  • Info Panel: Explains methodology and data source
  • Popups: Detailed station data on interaction
  • Controls: Easy toggling between views
  • Fullscreen: Immersive exploration mode

Learning Outcomes

Web Documentation Research Skills

  • Successfully fetched and analyzed Mapbox heatmap documentation
  • Extracted key paint properties and their usage patterns
  • Applied documentation examples to novel use case (climate data)

Mapbox Technique Mastery

  • New: Heatmap layer type and all paint properties
  • Advanced: Multi-layer visualization with zoom transitions
  • Refined: Globe projection styling with atmosphere
  • Maintained: Auto-rotation from iteration 1

Climate Data Visualization

  • Understood diverging color schemes for anomaly data
  • Applied density visualization to continuous phenomena
  • Designed multi-scale approach (global patterns → local detail)

Future Enhancement Ideas

  1. Temporal Animation: Show anomaly progression over decades
  2. Multiple Variables: Precipitation, sea level, ice coverage
  3. 3D Terrain: Elevation-aware temperature visualization
  4. Real-time Data: Integration with climate APIs
  5. Comparison Mode: Side-by-side historical vs current
  6. Regional Focus: Drill-down into specific areas
  7. Export Functionality: Save visualizations as images

Iteration Success Criteria

✅ Web Learning: Fetched and applied heatmap documentation ✅ Heatmap Implementation: All key paint properties configured correctly ✅ Climate Data: Realistic 280-station global dataset ✅ Pattern Visibility: Arctic amplification and regional trends clear ✅ Multi-Scale: Heatmap (global) + circles (local) working seamlessly ✅ Globe Features: Atmosphere, rotation, controls maintained ✅ Documentation: README explains heatmap advantages over circles ✅ Code Quality: Well-commented, organized, production-ready

Connection to Learning Series

This iteration demonstrates:

  • Progressive complexity: Building on globe 1's foundation
  • Web-enhanced learning: Real documentation informing development
  • Technique diversity: Different visualization for different data types
  • Professional quality: Production-ready implementation

The series showcases how web research + iterative development = rapid skill acquisition in geospatial visualization.