One accent, the rest gray

When the story is one series, draw it in the accent and gray the rest.

From dataviz (references/choosing-a-form.md, references/anti-patterns.md).

Same data, two stories

Click a line or region to focus it; add regions.

CategoricalBad
6 hues
EmphasisGood
1 hue + gray
:root { --accent: #2a78d6; --context: #c3c2b7; }

for (const s of series) plot.append(line(s, "context"));
plot.append(line(focus, "accent"));
plot.append(endLabel(focus, `${focus.name} +${pct(focus.growth)}`));
legend([{ key: "accent", text: focus.name }, { key: "context", text: `Other ${series.length - 1}` }]);

Which region grew fastest?

Press start, then pick the answer fast.

Round 1: categorical
VersionTimeAnswer
No rounds yet.

Why it matters, pros and cons

Why it matters

Six equal hues say six things matter equally. One accent against gray answers the question before the legend.

Pros

  • The point reads without a legend lookup
  • Scales to any number of series
  • Context stays visible for comparison

Cons

  • Wrong when every series is the subject
  • Gray series need a tooltip or table for identity
  • Never use gray to hide an inconvenient series