liveBook · Manning

Categorical palette

As explained in D3.js in Action, Third Edition

A categorical color is a distinct color assigned to identify a nominal category without implying magnitude or order.

A categorical palette assigns distinct colors to nominal categories, where the colors identify groups without suggesting magnitude or order. Choose categorical colors for nominal values; use sequential or diverging palettes for ordered values. section 3.1.2

Build the palette around the chart’s purpose and visual mood. A custom visualization uses eight colors for painting subjects plus another color for letters and drawings, with related hues distinguishing similar categories. section 14.3

Keep categorical palettes usable and accessible:

  • Do not make color the only carrier of category information; add patterns or varied shapes for people with color blindness. section 10.3
  • Check contrast for chart geometries, large text, and regular text against the background. section 10.3
  • Expect many categories to require similar hues, so reinforce distinctions with non-color encodings. section 10.3 section 14.3
Figure 14.7 For this project, we’ll need a categorical palette of eight colors for the painting subjects and an additional color for the letters and drawings. By playing with the brightness, we generate two other variations of this last color that we’ll use for the text and the project’s background.
figure

Compare the eight category colors with the additional color and its brightness variations for letters, text, and the background. section 14.3

How D3.js in Action, Third Edition covers it

How deep it goes
Defines nominal mapping and demonstrates palette selection for eight categories, but stops short of implementation code.
Examples
Uses eight painting subjects, letters, drawings, similar hues, brightness variations, patterns, and shapes as concrete palette examples.
What it assumes
Distinguishes nominal from ordinal and quantitative data before selecting categorical, sequential, or diverging palettes.
What you can do after
Apply categorical colors to nominal data and plan multi-category palettes with contrast and double-encoding safeguards.
How it connects
Connects nominal data with D3 scales and contrasts categorical palettes with sequential and diverging palettes for ordered data.

Also explained in

Compare how 2 books explain categorical palette →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.