Data Animated Heatwave Visualization

# Animated Data Visualization: Japan Climate Story

You are an expert creative technologist specializing in data-driven art and generative audio-visual experiences. Build a browser-based animated data visualization that combines climate storytelling with aesthetic motion design and generative audio.

## Project Requirements

### Theme & Data
{{climate-story}}

**Data acquisition:**
- Fetch historical temperature data from public APIs (e.g., Open-Meteo, NOAA, JMA) or use representative sample datasets if APIs are unavailable
- Compare the featured year against a 10–30 year baseline to highlight anomalies
- Surface 2–3 key insights (e.g., record-breaking months, deviation from mean, contributing phenomena like El Niño)

### Visual Style
**Aesthetic:** Hand-drawn pencil sketch with subtle chromatic aberration and pastiche composition. The look should feel artisanal yet polished—think analog textures meeting digital precision.

**Technical approach:**
- Use Canvas2D or WebGL (via Three.js / PixiJS / p5.js) for rendering
- Simulate pencil strokes with irregular line widths, cross-hatching, or particle trails
- Apply RGB channel offset (1–3px) for chromatic aberration; keep it tasteful—hint at VHS/analog glitch without overwhelming
- Animate data points as organic shapes: growing/shrinking circles, rising bar-sketches, flowing time-series curves, or morphing pictograms (sun, thermometer, map of Japan)
- Duration: exactly **3 minutes** (180 seconds). Use easing functions (e.g., `easeInOutCubic`) to pace transitions smoothly across acts (intro 20s, data exploration 140s, conclusion 20s)

### Generative Audio
Use **Tone.js** or the **Web Audio API** to synthesize a melodic soundtrack that evolves with the data:

- Map temperature trends to musical parameters: rising temps → ascending pitch/tempo; anomalies → dissonance or rhythmic shifts
- Instrument palette: warm, nostalgic tones (FM synth bells, soft pads, lo-fi Rhodes) to echo the hand-drawn aesthetic
- Structure: intro motif, development with variation as data unfolds, resolution/coda
- Sync audio cues to visual milestones (e.g., a note trigger when each year's data appears)

## Technical Specifications

**Language:** {{language}}

**Setup:**
- Single `index.html` entry point; bundle if using TypeScript (Vite or Parcel recommended)
- Include CDN links or package.json with dependencies (Tone.js, chart library if used, canvas/WebGL framework)
- No backend required; data fetching via client-side `fetch()` with CORS-friendly endpoints or embedded JSON fallback

**Code quality:**
- Modular architecture: separate concerns (data loading, visualization engine, audio synthesis, animation loop)
- Requestanimationframe-based render loop with delta-time for consistent playback
- Responsive canvas (scales to window size); provide play/pause control
- Comment key sections: data mapping logic, easing curves, audio-visual sync points

**Deliverables:**
1. Fully functional codebase ready to run by opening `index.html` (or `npm run dev` if bundled)
2. Brief README with instructions, data sources cited, and creative rationale (2–3 sentences)
3. Inline code comments explaining the chromatic aberration shader/filter and the audio-data mapping strategy

## Output
Provide the complete, production-ready code with all HTML, CSS, and JavaScript/TypeScript files. Ensure the visualization loops or gracefully ends at 3:00, and the melody complements rather than distracts from the data story.