# The Ocean's Heat: A Data Story

**Type:** Scrollytelling Explainer
**Theme:** Ocean Temperature Anomalies and Global Climate

## Story Brief
A single-page, scrollytelling data journalism piece that explores the accelerating warming of the world's oceans. It uses interactive, scroll-driven charts to walk the reader through the historical baseline, the recent unprecedented spike in temperatures, the impact on marine ecosystems, and the long-term trajectory.

## Section Outline
1. **The Surface:** A hook about the unseen heat, establishing the ocean as Earth's primary heat sink.
2. **The Historical Baseline:** What was normal? Visualizing the predictable band of temperatures from 1982 to 2011.
3. **The Anomaly:** The 2023-2024 spike. An animated reveal showing the sudden departure from historical norms.
4. **The Impact:** Marine heatwaves. A chart detailing the exponential rise in extreme temperature days and their ecological stress.
5. **The Trajectory:** Future projections. A visualization showing potential paths of warming based on emission scenarios.

## Visual Direction
- **Typography:** Serif for narrative body (evoking editorial journalism), sans-serif for UI, annotations, and charts.
- **Palette:** Dark, deep ocean theme. Deep navy blues transitioning to harsh reds and oranges to signify heat and anomalies.
- **Interactions:** IntersectionObserver triggers Canvas-based chart animations as sections enter the viewport. Smooth lerping between data states.
- **Charts:** Built from scratch using the HTML Canvas API to ensure zero dependencies and high performance.

## Technical Requirements
- Single `index.html` file.
- Embedded CSS and JavaScript.
- No external libraries (no D3, Chart.js, etc.).
- Responsive design for mobile and desktop, with sticky graphics and scrolling text.