Strip

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 carries data-patient. One handler on the poster reads both with closest: 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.

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.

The gallery version