observablehq
label on color swatches
When there is a label (which now defaults to the scale label), the swatches (color rect + color label) are now wrapped into their own div (.plot-swatch). We don't wrap if there is no label.
The div containing the swatches still gets the proper .plot-swatches-columns or .plot-swatches-swatches className depending on the columns option, the only change here is that it is decided a bit later in the code.
The CSS ensures that the label is close to the swatches (also is a bit simpler than what we had before), with the same vertical gap between them as with the ramp.
Here are two representative examples:
| "bad" | "ok" |
|---|---|
I suppressed the automatic label on some of the charts, either when it didn't seem useful (because it would be obvious from reading the tick labels), or simply for aesthetic reasons.