Three aesthetic directions for the WIO live-monitoring prototype. Each is a standalone single-page HTML file with the same underlying data layer — 140 vessels on 14 realistic shipping corridors, 5 whale shark ISRAs. Click into each, see which direction feels right, and we iterate from there.
Warm paper, deep navy ink, compass rose. Reads like something from a research institution or a classic Admiralty chart. Hatched ISRA polygons, Fraunces serif display, JetBrains Mono for numbers. Best for: external publications, donor reports, scientific framing.
Reads like a shipping operations centre. Clean light neutral background, IBM Plex Sans/Mono, MMF teal accents, live stats sidebar with alert pulses, sortable vessel-in-habitat table. Best for: live internal use, partner demos where "we're actively watching this" matters.
Reads like a newspaper feature. Warm newsprint tone, Literata serif headlines with a narrative sidebar, big pull-quote data, CARTO Voyager basemap for warmth. Best for: the public-facing teaser on the MMF website; the "92%" number is front and centre.
Shipping lanes are realistic. The old prototype let vessels cut across Madagascar. This v2 defines 14 shipping corridors (Suez–Mumbai, Suez–Cape via Moz Channel, Suez–Cape east of Madagascar, India–Cape via Maldives, East African coastal, Mauritius–Mombasa, Moz Channel, Madagascar east coast, Bab-el-Mandeb–Cochin, etc.). Each has hand-picked waypoints that stay in open ocean — vessels follow linear interpolation between waypoints, so lines between them never cross land. Weighted by realistic traffic density.
Vessel count raised to ~130–140 across all variants (up from 35 in v1). With 14 routes and weighted distribution, the map feels alive across the whole region — you should see activity from the Arabian Sea down to the Cape, not just clustered around one corner.
5 whale shark ISRAs preserved from v1: Nosy Be, Mafia Island, Tofo/Inhambane, Mahé, South Ari Atoll — with documented individual counts and peak seasons.
Vessel states. Safe (MMF teal, small) or In-habitat (alert red, slightly larger, with colour transition). Each variant styles these differently per its aesthetic.
Basemaps. V1 uses CartoDB Positron with a sepia/paper filter. V2 uses CartoDB Positron with a light grid overlay. V3 uses CartoDB Voyager for its warmer, more editorial feel. All three avoid dark mode per brief.
Files. Each variant is a single .html file. Open directly in any modern browser — no server required. Dependencies (Leaflet, Google Fonts, CartoDB tiles) load from CDN.