Watermarks, Made Physical — 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/watermarks

Watermarks, Made Physical

Event-time streams arrive out of order. A watermark is the pipeline’s promise that older event-time windows can close. Here, a window stays open while its end time plus the watermark strategy is still at or beyond the current event time. A late arrival drops over its own event time, hits an angled lid, and rolls into the left gutter.

A Semiotic remake of the mechanic fromflink-watermarks.wtf, built on EventDropChart so the settled projection and runtime state stay inspectable.

Scenario

Current event time70sWatermark strategy18sReplay speedWindow size

Conversation Arc

0events

0edits

0renders

disabledno events yet

current event late event — Backfill burst: a batch replay injects old event times after newer windows have already moved on.

10/10arrived / total

2binned by physics

8sent to gutter

18swatermark strategy

70scurrent event time

0/0live / queued

queued0s sim time

Settled projection

WindowCountBinnedGutterTotal

0-12s2022

12-24s2022

24-36s2022

36-48s2022

48-60s1101

60-72s1101

72-84s0000

Selected event

id: backfill-10
event time: 28s
arrival: 70s
source: backfill
timeliness: late event

Arrival order

backfill-016s4sapiarrived

backfill-0439s8ssensorarrived

backfill-0212s13sapiarrived

backfill-0545s18ssensorarrived

backfill-0324s24sfrontendarrived

backfill-0658s30sapiarrived

backfill-0763s36sfrontendarrived

backfill-0811s62sbackfillarrived

backfill-0917s66sbackfillarrived

backfill-1028s70sbackfillarrived

How it maps to Semiotic

Data rows carry an event time and an arrival time. Current event time and the watermark strategy decide which windows have lids; bodies drop over their event-time x-position, and closed windows add angled physics colliders. The runtime state comes from frameProps.onTick — the same numbers an agent or test would read.

JSX

import { EventDropChart } from "semiotic/physics" // Current event time and the watermark strategy decide which windows are still // open. Color marks event timeliness; the angled lid alone decides whether an // event settles into its bin or rolls to the late gutter. const classify = (event) => { return event.timeliness === "late" ? "late" : "in-window" } <EventDropChart ref={chartRef} data={arrivedEvents} timeAccessor="eventTime" arrivalAccessor="arrivalTime" windows={{ size: windowSize }} watermark={{ value: currentEventTime - allowedLateness }} timeExtent={eventTimeExtent} colorBy={classify} timeScale={8} // playback speed — higher is faster ballRadius={7.5} showProjection={false} frameProps={{ onTick, foregroundGraphics }} />