The Long Way Around — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/examples/port-congestion-replay

The Long Way Around

Global chokepoint monitor / IMF PortWatch replay

The long
way around

A quiet spring, a canal sealed shut by a single ship, and a crisis that pushed a trade lane around a continent. Every count below is an AIS-observed container-ship transit.

Replay dateApr 18, 2021100%

On March 23, 2021 a 400-meter container ship wedged itself across the Suez Canal. Transits fall to near zero for six days while ships stack up in the Red Sea — then a 36-ship convoy bursts through the day after she floats free.

Day 42 / 42

01Suez Canal today20 ships

02Vs pre-event pace-98 transits

03Bab el-Mandeb Strait today11 ships

04InspectionAll corridors

Temporal process flow

Traffic picks a lane, and the lanes trade places

Each ribbon is three days of real container-ship transits recorded at the downstream gate. Hover or click a ribbon to isolate its corridor.

Geographic movement

Three corridors, nine measured gates

Leg width is the trailing 7-day average of real daily container transits at the gate each leg crosses; particles indicate direction.

Imperative event stream

Every lost transit is a ship waiting somewhere

Daily bars are real transits minus this scenario's own pre-event pace at the watched gate, so the running level reads as accumulated shortfall. Selecting a corridor moves the gauge to its gate.

Cross-scenario analysis / Form 04

Three seasons in one square of days

Every dot is a real day — 154 of them across all three scenarios, measured at four gates at once. The quiet spring is the tight cloud everything else is judged against. The Ever Given stretches only the Suez axis: six days slide toward zero and snap back, while the other three gates never notice — a one-gate accident. The Red Sea winter is a system event: Bab el-Mandeb and the Cape trade places along an anti-diagonal, the whole cloud walks away from normal and stays there, and Panama drifts low under drought at the same time. Click any dot to jump the replay to that scenario and day.

Suez / day: 2 – 36
Bab el-Mandeb / day: 2 – 32
Cape / day: 1 – 24
Panama / day: 2 – 12

Quiet spring ’23

Ever Given ’21

Red Sea ’23–24

Suez / day

Bab el-Mandeb / day

Cape / day

Panama / day

Suez / day

Bab el-Mandeb / day

Cape / day

Panama / day

Four frame families

ProcessSankey and FlowMap receive declaratively derived snapshots of the selected scenario. RealtimeWaterfallChart is synchronized through its imperative changeset API, while ScatterplotMatrix holds every day of all three scenarios at once for a clock-free comparison and doubles as a navigation surface. A shared corridor identifier coordinates observation and selection across the time-bound views.

JSX

// Three real IMF PortWatch windows, one replay shell. const [scenarioId, setScenarioId] = useState("everGiven") const [cursor, setCursor] = useState(scenarioDays(scenarioId)) const currentTime = replayTimeForCursor(scenarioId, cursor) // Declaratively derived snapshots of the selected scenario. <FlowMap nodes={locations} flows={flowsAtTime(scenarioId, currentTime, selectedCorridor)} areas="land-110m" /> <ProcessSankey nodes={gates} edges={processEdgesAtTime(scenarioId, currentTime, selectedCorridor)} domain={domainFor(scenarioId)} pairing="temporal" /> // Deviation-from-pace bars mirrored through the imperative changeset API. useSyncedPushData(waterfallRef, visibleDeviationRows, { id: "id", resetKey: `${scenarioId}:${watchedGate}`, }) // The matrix holds every day of all three scenarios at once — // clicking any point jumps the replay to that scenario and date. <ScatterplotMatrix data={PORT_MATRIX_ROWS} fields={["suez", "babElMandeb", "capeOfGoodHope", "panama"]} colorBy="scenario" onClick={(row) => { setScenarioId(row.scenarioId) setCursor(row.dayIndex + 1) }} />