Marine Forecast
Marine Forecast
A multi-window coastal forecasting interface combining weather, wind, wave, and sea-condition data into a responsive time-series workbench.
Read the full notesThis program is best experienced on a larger display. Rotate your device, or scroll sideways at your own risk.
| Description | |||
|---|---|---|---|
| Norway / North Sea | 60.3929, 5.3242 | Western Norway, exposed coastal weather | |
| Portugal / Atlantic | 38.6968, -9.4215 | Lisbon coast, Atlantic exposure | |
| Faroe Islands / North Atlantic | 62.0097, -6.7716 | Between Iceland and Norway | |
| USA / Central Pacific | 19.6400, -155.9969 | Kailua-Kona, central Pacific | |
| Thailand / Gulf of Thailand | 10.0981, 99.8381 | Gulf of Thailand, diving destination | |
| Norway / Skagerrak | 58.1467, 7.9956 | Southern Norwegian coast, Skagerrak strait | |
| Norway / Norwegian Sea | 68.1667, 13.7500 | Arctic archipelago, Norwegian Sea | |
| Portugal / Mid-Atlantic | 32.6657, -16.9255 | Funchal, mid-Atlantic island | |
| Norway / Inner Skagerrak | 59.2970, 10.5694 | Sheltered fjord, inner Skagerrak | |
| Iceland / Faxaflói | 64.1355, -21.8954 | Faxaflói bay, North Atlantic | |
| USA / California | 37.6511, -122.9284 | Pacific coast, Northern California | |
| Scotland / North Atlantic | 60.1547, -1.1494 | Between Norway and Scotland | |
| Japan / Kantō | 35.4815, 139.8595 | Urban bay and Pacific coastal conditions | |
| Norway / Norwegian Sea | 69.6492, 18.9553 | Arctic gateway, Norwegian Sea | |
| Japan / Okinawa | 26.2280, 127.3030 | Kerama Islands, East China Sea |
Overview
A desktop-like marine forecast workspace. You start with a searchable table of coastal locations, then open selected locations into draggable, resizable forecast windows with live weather and marine data rendered as interactive D3 charts.
On smaller screens the desktop metaphor steps aside: the selected forecast renders as a full-width panel instead of a floating window.
Why it matters
Multi-panel workspaces are the backbone of professional tools - trading terminals, dispatch systems, monitoring dashboards, GIS software. They demand careful coordination of z-index and focus management, window geometry state, and per-panel data lifecycles, none of which standard component libraries provide.
Combining that with live third-party API data and domain-specific time-series visualization makes this the closest thing on this site to a real product interface rather than an isolated widget.
Technical notes
Each open forecast is a window object in a workspace store: position, dimensions, z-index, and minimized/maximized state. Window geometry persists per location, so reopening a forecast restores your layout rather than starting over.
Charts are built directly on D3 with responsive resizing, hover crosshairs and tooltips, toggleable metrics, and threshold bands highlighting favorable or rough conditions. All chart colors are bridged from the Chameleon Engine's semantic tokens, so the visualization re-skins itself when you switch themes - try Terminal.
Everything runs client-side against the Open-Meteo API from a statically hosted page: no backend, no API proxy, no build-time data.
What this proves
- Complex interaction patterns built from scratch: drag, resize, focus, minimize, maximize
- Workspace state management with persistence across sessions
- Z-index and focus coordination across many live panels
- D3.js time-series visualization integrated with a design-token system
- Client-side API integration within a static-site architecture
- A responsive strategy that adapts the interaction model, not just the layout