Grouped bars

How it’s built

Grouped bars are a Plot inside a slat. The outer Plot draws one slat per team, and that slat holds <Plot value={d.medals} color={METAL_COLORS}>, which draws one thin slat per medal. Because the inner Plot has no overlap, it divides the team’s thickness between its three slats, which is what makes them a group. Each medal’s slat is a single Bar, coloured from the inner Plot’s own color list.

The gallery version adds:

• A ranking that reads like a medal table. sortBy puts the most golds first, then silvers, then bronzes.
• A key, so a team keeps its slat. Teams are keyed by name, so when the order changes a team slides to its new place with its medals.
• A medal that lifts on hover. The medal’s face is an element inside the Dot, not the Dot itself, so it can grow and cast a shadow on its own timing while rhp keeps moving the Dot.

The simple version

Three bars per group, in their metals' colors. The same structure with almost no styling: a good place to start your own.

The gallery version