← Gallery
Diverging bars
10 of 23Hotter than normal
Each month above or below its normal, its bar and band colored by its own value on a diverging scale.
- Scale
- negative values
- colors from data
The simple version
Bars above and below zero, colored by their sign. The same structure with almost no styling: a good place to start your own.
How it’s built
The scale runs from -10 to 10, so zero sits in the middle and a Bar drawn to a negative value runs the other way by itself.
The slat contains three blocks: a start Label for the month, a Bar to d.change, and a Label at that same value.
side="before" moves that label to the other side of the bar’s end when the change is negative, so the number always sits outside the bar rather than on top of it.
The gallery version adds:
- A colour taken from the value. Each month’s Bar picks a colour from a blue-to-red ramp, and the same colour tints the slat through a CSS variable.
- The axis is drawn by a
Scale. A hairline at every degree, with zero brighter than the rest and named “normal”. - Pointing at a month fades the others. The month under the pointer goes back into the Plot as data, so each slat decides for itself whether to fade.