Dumbbell

The simple version

A bar between two values, with a dot at each end. The same structure with almost no styling: a good place to start your own.

How it’s built

A dumbbell is one Bar with a Dot at each end. The slat draws a Bar from d.low to d.high, then a Dot at each of those two values, so the bar becomes the line between them. order={sortBy("high", "desc")} puts the warmest city first.

The gallery version adds:

• Two orders to choose between. The buttons swap order between the summit and the size of the climb.
• A key, so a climb keeps its own slat. key ties a slat to its peak rather than to a position, so when the order changes each climb slides to its new place instead of the data jumping from slat to slat.
• A label that only appears in one order. Which order is in use is passed to the Plot as data, so the slat can put a class on its root and let the CSS fade the summit height out and the climb in.