Color follows the entity

Bind color to identity, so filters and sorts never repaint survivors.

From dataviz.

Hide a series

Uncheck Acme and watch the remaining lines.

Companies shown in both charts
Color by rankBad
repainted 0/5
Color by entityGood
repainted 0/5
const SLOT = new Map(entities.map((e, i) => [e.id, i + 1]));
const colorOf = (id) => `var(--series-${SLOT.get(id)})`;

Sort by value

Sort by value, then switch quarters.

Color by rowBad
repainted 0/5
Color by entityGood
repainted 0/5
const rows = data.map((d) => ({ ...d, color: colorOf(d.id) }));
rows.sort((a, b) => b.value - a.value);

Add a company

Add Acme, remove one, then pass eight companies.

Color by sorted indexBad
repainted 0/4
Stable color mapGood
repainted 0/4
function slotFor(id) {
  if (slots.has(id)) return slots.get(id);
  if (slots.size >= 8) return "other";
  slots.set(id, slots.size + 1);
  return slots.get(id);
}

Why it matters, pros and cons

Why it matters

Readers learn a color once, then stop reading the legend. Repainting by position silently swaps what every line means.

Pros

  • Filter and sort without re-learning the legend.
  • Same company, same hue on every chart.
  • Isolate reads the map, never writes it.

Cons

  • The map must live in shared dashboard state.
  • Gaps can put a weak pair side by side.
  • Past eight entities, fold into Other or facet.