Stem
How it’s built
A stem plot is two blocks per sample: a thin Bar from 0 to d.y, and a Dot at the same value for the tip.
The scale runs from -1 to 1, so a negative sample’s Bar runs the other way on its own, and the wave sits around the middle of the chart.
28 samples means 28 slats, each 14px thick.
The gallery version adds:
- A resting line drawn by a
Scalewith one tick. A Scale is a Plot of ticks, so a scale of a single tick is the simplest way to draw one line across a chart. - A glow that fades with time, set as a CSS variable on each slat, so the stem and its tip fade together.
- A ring that runs down the wave.
Each sample’s transition starts 8ms after the one before it, which in the CSS version is a
transition-delayand costs no JavaScript at all.
The simple version
A stem from zero and a dot at each value. The same structure with almost no styling: a good place to start your own.
The gallery version
16 of 23The sound of a bell
A bell's ring as stems from rest; click the wave to strike it again and watch the new ring run down it.
- Scale
- transition-delay
- click