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

Ships moving through gates over time

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

Track accumulated shortfall at the selected gate

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

Compare daily traffic across all three periods

Each dot is one real day measured at Suez, Bab el-Mandeb, the Cape of Good Hope, and Panama. The quiet spring forms the reference cluster. The Ever Given period departs mainly along the Suez axis, while the Red Sea period shifts traffic from Bab el-Mandeb toward the Cape as Panama also runs below its reference pace. Select a dot to open that day in the replay.

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 IMF PortWatch periods share 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) }} />