Chapter 16 · Business data, spatialised
Throughput
Twelve months of orders, drawn as somewhere to stand. Particles carry the work between four regions. The chart is the floor.
Every figure on this page comes out of one inline array, and every one of them is printed next to the picture that produced it.
dragscrub the year · Hfold the dock · spaceplay
How it works
- Technique
- Particle flow on a perspective plane, plus a stacked area chart used as terrain. One Canvas2D context, no WebGL, no shader compile, no texture. The throughput figure is a flow problem, so it is drawn as one: particles entering at a region's rate and travelling a real route to a real destination.
- What it does
- Takes the report a business already has — orders by region by week — and makes it an environment rather than a table. Volume, seasonality, growth and the shape of a bad fortnight all become something you see before you read a number. Scrubbing the timeline replays the year, which is what a Sankey diagram cannot do and what a bar chart cannot do at all.
- Live demo
- The field above is the real engine. Drag it to scrub the year, press the modes to change what the space is for, and read the readout — which is computed from the same array the picture is drawn from, never typed.
- Good for
- Commerce and logistics dashboards. Annual reports that are read once and remembered. Any site that currently has a chart nobody can read.
- Combines with
- Scroll · typography · a CMS data source · a booking flow. The timeline rail is an ordinary range control, so a visitor can scrub the year with a keyboard and a screen reader can read every week.
- Complexity
- Advanced. A seeded PRNG so the render is reproducible, a 52-week dataset, a bezier route graph, an emission scheduler that ties particle rate to the data rather than to a constant, and an adaptive quality governor. About 800 lines of the page.
- Performance
- One 2D context. The particle budget is derived from the host's measured frame time rather than from a device sniff, so a slow machine loses particles and not frames — and the budget in force is printed. devicePixelRatio is capped at 2. Under reduced motion the whole field draws once, statically, with the year held at its peak.
The number is the thing nobody can read.
Every business has the same chart: orders by month, four coloured bars, a number in a corner. It is legible on a laptop and useless on a phone, and it answers none of the questions a boss actually asks — where is the work coming from, when did this go wrong, is that seasonal or is that new.
Flow answers those. If orders are a stream of work moving between places, draw the stream: particles enter at the rate the data says they enter, they travel the route the data says they travel, and the density is the number. Nobody has to read a single digit to know that the south-east is carrying the year, because it is visibly carrying the year.
The chart is the floor, not a panel.
The stack is drawn as an area chart and then put on the ground plane, so the year has a silhouette. A good October is a ridge you can find by looking for the bump; a bad February is a dip; the Black Friday spike is a wall. Shape before scale is how people actually recognise a pattern in a time series, and a panel chart never gives it to them because the panel is flat and full of grid lines competing for the same attention.
The playhead is acid because acid is the spine's EDGE token, and an edge is exactly what a playhead is: a thin hard mark, never a fill. Everything large is cyan. The hierarchy is the brand's, not an exception to it.
Scrubbing is the whole point.
A Sankey diagram is a snapshot; a bar chart is a snapshot; this is a film. Fifty-two weeks on a rail, and dragging it replays the year — the flow thins in the quiet months, spikes in November, and the shape of the floor changes as you go. That is a thing a slide in a quarterly deck can never be, and it is four lines of code once the rail is a range input.
And it is honest about being a picture: every printed figure is derived from the same array the particles are scheduled from. The readout cannot disagree with the field because there is only one source, and it is sitting in the markup where you can read it.