The making · No. 170 · Chance

Reservoir: how a fair sample stays fair.

A short account of the palette, the type, and the canvas that turns an endless stream into seven honest cups.

01 / ConceptThe single job

Reservoir is a fictional interactive essay on reservoir sampling — the algorithm that keeps a uniform sample of a stream you can only see once, using memory that never grows. Its audience is the curious engineer and the numerate stranger alike. The page has one job: to make it felt that seven items, chosen with fading one-in-n odds, remain a perfectly fair sample of a river of any length — and to prove it, not merely claim it.

02 / PaletteWater, and the thing kept from it

Argued from the subject: a cold river ground, a cool current for everything in motion, and a single warm accent reserved for the sample you hold — the light in the cup.

Current

#0E1620

The riverbed ground — deep blue-black, so the stream and the cups both glow against it.

Stream mark

#4FA8C0

The moving water: current lines, chip outlines, histogram bars. A LINE/MARK token — never body text.

Held accent

#E0B24A

Reserved for what you keep — the seven cups, the odds meter, the uniform line. Scarcity gives it weight.

Water ink

#D4DEE4

The derived body ink — light on the dark ground at well above 4.5:1, with #9DB0BC for secondary copy.

03 / TypeA civic sans and a ledger mono

Archivo carries the voice — a grotesque with the plain authority of signage; IBM Plex Mono handles every number, so counts, odds and indices line up in tabular columns like a running tally.

Archivo · display, 800

A fair sample of a river

IBM Plex Mono · counts & odds

n = 1,284 keep 7 ⁄ 1284 0.55%

The one moment of typographic bravery is the live fraction in the status bar — a bold amber 7 ⁄ n that ticks down as the river lengthens, the odds themselves set as display type.

04 / TechniqueTwo canvases, one honest algorithm

Everything is procedural — no images, no libraries. Two <canvas> surfaces share a single requestAnimationFrame loop (DPR capped at 2, sized to container, paused on document.hidden).

The stream — numbered chips flow leftward and cross a decision gate. Arrival n is kept with probability seven-over-n; a kept chip flies into a cup and evicts a uniformly-chosen occupant, which drops back into the current. This is textbook Algorithm R: the first seven fill distinct cups in order, and only afterward does the random replacement begin.
The proof — a second, headless sampler replays a length-24 river many times per frame and tallies where each survivor came from. The bars climb and level onto a single dashed line at seven-in-twenty-four: the first arrival held exactly as often as the last. The worst deviation from uniform is printed, and it shrinks as the runs pile up.
The signature — a fair sample of an unbounded stream kept in a fixed cup, with the fairness drawn rather than asserted. The reservoir at rest already holds a telling mix of low and high indices, so a glance shows old items surviving beside new ones.

05 / IterationThree passes, logged

Pass 1Craft

Right-aligned the tally's uniform · 7 in 24 reference label so it no longer collided with the first (amber) bar.
Corrected the Cups turned over counter to tally only genuine evictions — the initial filling of empty cups is no longer miscounted as a turnover.
Balanced the status-bar rhythm and reserved the amber accent strictly for held marks, keeping copy on the water-ink token.

Pass 2Depth

Added a fading-odds meter at the gate: a slim amber fill of seven-in-n that visibly shrinks as the river lengthens, making the decreasing acceptance odds legible on the canvas itself.
Gave the longest-held survivor a quiet breathing ring — a second-read detail that rewards a return visit and underlines that an old item is held just as legitimately as a new one.
Made the visual faithful to Algorithm R — the first seven arrivals now take distinct cups in order instead of colliding at random during the fill.

Pass 3Hardening

Fixed a 375px overlap where chips packed tighter than a pill; the spawn interval now scales with chip width, so the stream never collides on a phone. Verified nav and wordmark sit within the viewport and scrollWidth stays clean.
Pared the animated current lines from five to three — the Chanel rule, one ornament removed — for calmer water behind the numbers.
Confirmed the reduced-motion path renders a settled, full-reservoir still with the proof pre-converged; verified focus-visible states, DPR cap, container resize, and the visibility-paused loop.