import { EventDropChart } from "semiotic/physics"
Example
Each circle is one event. Its event time selects a window; its arrival time determines when that window's admission policy is checked. This history accepts six events and rejects the old event arriving at 33. Advancing the watermark closes windows without relabeling events they already accepted.
Replay and recorded admission
With watermark={{ delay: 8 }}, arrivals advance the watermark from the greatest event time seen so far. The comparison uses the end of the event's window, including equality. timeScale changes playback speed while preserving those decisions.
Use watermark.value to test a fixed current policy. If your records include the watermark at each original arrival, pass that field through watermarkAtArrivalAccessor; current window closure can then change independently of historical acceptance. TheWatermarks example demonstrates this with an inspectable decision for each event.
Read the containers and the clock
A closed lid is solid for every event. In a snapshot of the current board, previously accepted events start beneath their lids. Later arrivals fall onto the ramp and roll into the farthest-left bin. Window labels report accepted source totals; the far-left label reports the total sent there. These totals describe the snapshot, including events still being illustrated. If you rewind current closure while retaining recorded rejections, that rejected history starts inside the far-left bin; the reopened board cannot reenact its earlier rejection.
To show the causal sequence, supply successive data and watermark states: let an event enter, close its lid, then supply the late arrival. Keep the chart mounted and use stable event IDs. Thethree-step Watermarks lesson pauses source time while each arrival travels and counts actual container occupancy. Changing timeScale alone does not animate historical lid changes.
For live container counts, use the metadata frombuildEventDropPhysics with the same layout options as the chart. The helper classifies each body's center by its physical container, independently of its source admission flag. A body inside a bin can still be moving; this is occupancy, not a claim that it has settled.
TSX
import { readEventDropOccupancy } from "semiotic/physics" // In frameProps.onTick, using metadata from the matching layout: const counts = readEventDropOccupancy(metadata, controls.readBodies()) // { accepted: [countPerWindow, ...], late, inFlight, total } // sum(accepted) + late + inFlight === total // total covers materialized bodies; queued arrivals are not included.
Props
| Prop | Type | Required | Default | Description |
|---|
data | array | Yes | — | Event rows with event and arrival times. |
timeAccessor | string | function | — | "time" | Event-time field used for windows. |
arrivalAccessor | string | function | — | "arrivalTime" | Arrival-time field used for admission order and ingestion pacing. Ties retain source order. |
watermarkAtArrivalAccessor | string | function | — | — | Recorded watermark for each arrival, independent of current window closure. |
windows | object | — | { size: 10 } | Window config such as { size, gapPolicy }. |
watermark | object | function | — | — | { delay } or a latest-event-time function replays a monotonic watermark; { value } tests one fixed admission policy. |
timeScale | number | — | 1 | Arrival replay playback speed; higher is faster (1 = real event-time). |
ballRadius | number | — | 7 | Radius for each simulated event body. |
colorBy | string | function | — | — | Categorical field used to color bodies. |
seed | number | — | 1 | Deterministic simulation seed. |
showProjection | boolean | — | true | Draw the window bins, watermark, closed windows, and late-event scaffold over the moving bodies. |
size | array | — | [760, 360] | [width, height] in pixels. |
width | number | — | 760 | Width alias used when size is omitted. |
height | number | — | 360 | Height alias used when size is omitted. |
hoverRadius | number | — | 16 | Pixel hit radius for event-body hover tooltips. |
paused | boolean | — | false | Pause the simulation. |
tooltip | boolean | function | object | — | true | Enable the default event-body tooltip, pass a custom tooltip renderer/config, or set false to disable hover tooltips. |
frameProps | object | — | — | Advanced StreamPhysicsFrame props. |