← Gallery
Strip
15 of 23Back on your feet sooner
Every patient as a capsule at their days to recover, with each group's average as a line.
- overlap Plot
- across
- Tick
The simple version
A dot per sample in each slat, spread across it. The same structure with almost no styling: a good place to start your own.
How it’s built
Every patient is a Dot, and all the Dots of one group share a band.
The group’s slat holds an overlap Plot, so its slats sit in the same space rather than stacking, and each one draws a single Dot at d.at.
across places a Dot across the band, from 0 to 1, and here it comes from the Dot’s own index (0.15 + ((s.index * 0.618) % 1) * 0.7) rather than from a random number, so a patient keeps its place when the data changes.
A Tick at the mean and a start Label finish the group.
The gallery version adds:
- Capsules instead of dots, which is only CSS on the
Dot: a border radius and a tilt. - Pointing at a group fades the others.
Each group’s slat carries
data-arm, and each Dot carriesdata-patient. One handler on the poster reads both withclosest: the group under the pointer keeps its color and the others fade, and a capsule under the pointer gets a ring. - A readout that never moves the chart. The line above the chart reads out the capsule under the pointer, and it is kept to one line, so the chart doesn’t jump.