# One-shot Data Story Prompt

Create a single-file scrollytelling data story at `/data-story/` about warming oceans and freight risk, with a clear bias toward shipping operations, route exposure, port disruption, and cargo consequences.

## Story brief

Build a report-led interactive explainer showing how hotter seas turn a climate signal into shipping risk. Keep the narrative anchored in carriers, ports, chokepoints, schedules, cargo mix, and rerouting decisions. The story should move from physical ocean heat, to route-level exposure, to operational knock-on effects, to adaptation choices. Treat it like a newsroom special rather than a dashboard: each section raises a question and each chart answers it.

## Audience

- General readers who can follow charts but do not work in shipping
- Operators and policy readers who want a compact systems view

## Narrative spine

1. Opening: ocean heat is no longer background context; it is reshaping the operating environment for ports and sea lanes.
2. Mechanism: marine heat, cyclone energy, and coastal flooding increase disruption pressure for shipping.
3. Exposure: a small set of freight corridors carries disproportionate climate risk.
4. Consequence: delays, insurance pressure, rerouting, and spoilage risks accumulate unevenly across cargo types.
5. Response: carriers, ports, and buyers can diversify routes, harden assets, and shift timing, but trade-offs remain.
6. Closing: the question is not whether oceans matter to logistics, but how much fragility firms are willing to carry.

## Section outline

### 1. Heatline

- Full-bleed opening with a warming-ocean anomaly chart
- Key question: how fast is the baseline moving?

### 2. Where the heat lands

- Basin map or corridor map linking heat stress to freight lanes and chokepoints
- Key question: which routes sit inside repeated thermal stress?

### 3. Disruption compounds

- Multi-series chart for storm days, port flood days, and reef/coastal stress proxies
- Key question: why do shipping disruptions cluster rather than appear as isolated events?

### 4. Cargo at risk

- Ranked bar or dot plot for cargo sensitivity such as perishables, energy, electronics, and bulk commodities
- Key question: which cargo classes feel delay and temperature shocks fastest?

### 5. The adaptation ledger

- Scenario comparison panels for route diversification, buffer inventory, and port hardening
- Key question: what does resilience buy, and what does it cost?

### 6. Decision horizon

- Closing summary with takeaways, glossary, and chapter jump links

## Chart plan

- Chart 1: ocean heat anomaly area-line chart with milestone annotations
- Chart 2: stylised freight corridor map with heat-risk overlays
- Chart 3: disruption pressure multi-line chart
- Chart 4: cargo sensitivity ranked bars
- Chart 5: adaptation trade-off comparison cards with mini-bars

## Interaction requirements

- Sticky chapter navigation with progress tracking
- Scroll-linked active chapter highlighting
- Keyboard support for chapter jumps
- Touch-friendly chapter chips
- Persist last-read chapter and annotation toggle state in local storage
- Annotation toggle that reveals explanatory callouts without breaking mobile layout

## Visual direction

- Editorial, atmospheric, and maritime rather than corporate dashboard
- Deep sea palette with heated coral accents
- Dense but readable typography
- Layered background gradients and chart textures
- Charts should feel integrated into the article, not embedded widgets

## Technical constraints

- Single `index.html` with inline CSS and JS only
- Vanilla JS only
- Mobile-first readable layout
- No external assets