Skip to content

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 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.