Violin
How it’s built
A violin is one Area per group.
density(d.samples) turns a list of samples into [value, height] points, a smooth count of how many samples fall where along the scale.
mirror on the Area draws that shape both ways from the middle of the slat, which is what makes it a violin rather than a hill.
A Dot at the median finishes it.
The gallery version adds:
- One peak for all four instruments.
peakis given the tallest density of any of them, so the widths can be compared instead of each violin filling its own slat. - A piano keyboard as the scale.
It is a
Scalewith one slat per semitone, and each key is a Bar fromd.attod.next, the next tick’s value. - Keys that light up with an instrument.
Pointing at an instrument passes its range to the Scale as data (
low,high,tint), and each key decides whether it is inside that range.
The simple version
A mirrored density per group, with its median. The same structure with almost no styling: a good place to start your own.
The gallery version
14 of 23The string section
Where each instrument plays, drawn over a piano keyboard; point at one to light its range on the keys.
- density()
- Area
- Scale
- focus as data