Add interactive PlanetPulse globe visualization (MVP)

[jakenuts]

Summary

• Introduces a client-side, interactive globe visualization (PlanetPulse) to explore city-level metrics over time without a build step.
• Uses CDN-based Three.js, OrbitControls, and three-globe for a lightweight, dependency-free MVP.
• Provides metric-driven coloring, altitude, legend, timeline controls, and a detail panel for inspection.

Changes

Files added

• app.js
• index.html
• styles.css

Key design choices

• No build pipeline: fully client-side with CDN assets (Earth texture, bump map).
• Hard-coded dataset for clarity: city coordinates, CO2, renewable share, GDP, population, and yearly series.
• ThreeGlobe-based globe with point overlays, hover/click interactivity, and a responsive UI.

Features & capabilities

• Metric selector to switch between CO₂ per capita, Renewable share, and GDP per capita.
• Time-enabled data: 2010, 2015, 2020, 2024 with a play/pause timeline and a year slider.
• Automatic globe rotation with an option to pause; user can drag to rotate and inspect details.
• Dynamic legend and metric summary that update when the metric or year changes.
• Detail panel showing city name, value, population, renewables, CO₂, and GDP per capita; supports hover (informational) and click (pin) interactions.
• Graceful fallback when WebGL is unavailable: static message instead of the globe.

Data & Metrics

• METRICS config includes co2, renewable, and gdp with labels, units, accessors, and color palettes.
• DATA_POINTS includes 13 major cities with lat/lon, yearly series for CO₂ and renewables, and static GDP/population data.

UI/UX

• Legend and summary panels update to reflect the selected metric and year.
• Timeline area shows Play button, a year slider, and year label; responsive layout for mobile.
• Status area communicates readiness and errors.

How it works

• app.js orchestrates: data definitions, scene creation (Three.js + ThreeGlobe), UI wiring, and interaction handlers.
• The globe renders city points whose altitude scales with value and color encodes the metric, using a color scale derived from the metric’s palette.
• Hover/click handlers populate a detail panel with contextual information.

Build & Run

• No build step required. Open index.html in a modern browser.
• All assets are loaded via CDN:
  • Three.js 0.161.0
  • OrbitControls
  • three-globe
  • Earth texture and bump maps hosted online

Testing plan

• Switch between CO₂, Renewable, and GDP metrics and verify legend, summary, and point visuals update.
• Hover a city to see the detail panel update; click to pin details.
• Use the year slider to scrub between 2010, 2015, 2020, 2024 and confirm point values update.
• Play/Pause timeline to auto-advance years and refresh point visuals.
• Resize the window to ensure the globe and UI respond correctly.
• Pause spin, rotate, then resume to confirm interactivity coherence.
• Verify graceful fallback message appears if WebGL is unavailable.

Notes & future improvements

• This is an MVP; future work could add a choropleth overlay, more cities, smoother timeline interpolation, or a lightweight build step for bundling.
• Dataset is small to keep the example clear and fast; could be expanded with real-time or larger-scale data sources.

🌿 Generated by Terry

---

ℹ️ Tag @terragon-labs to ask questions and address PR feedback

📎 Task: https://www.terragonlabs.com/task/5c43298d-3458-4c7a-8a4a-3e73df89d1eb