Data visualisation

Three palettes for three questions — which, how much, and which side of the centre — each step read against the canvas and a card in both modes, and a rule for what a chart may ask of colour.

No chart component

The palette is for whatever draws the chart — Recharts, D3, Observable Plot, a canvas — through the custom properties, --ap-color-chart-* and --ap-color-category-*. The charts on this page are SVG drawn from the same properties, and each is drawn twice, on a card and on the canvas, because those are the two grounds a chart renders on and every figure below is read against both. A chart library is a library, and not this system’s job.

Which: the six categories

A series takes a hue from category/*, the palette the Scheduler colours a person’s events with, in this order — by hue distance, so the closest pairs come last: ember against glow measures 1.01:1 and glacier against moss 1.03. The six fills share one lightness, which is why every category’s label and tint hold the same figures, and it is also the warning: on a chart the six differ by hue alone, and a reader who does not see hue does not see six series.

  1. glacier
  2. flare
  3. moss
  4. glow
  5. amber
  6. ember

So a categorical chart names its series directly — at the end of the line, on the bar, in the cell — or gives each a marker of its own shape, never a colour legend alone. The chart below does both. A seventh series has no seventh hue: it splits the chart, or takes a pattern fill. And the six are not statuses: a warning is not “amber”, which stays under surface/warning-subtle and text/warning.

On a card — surface/raised

020406080JanFebMarAprMayJunWebPhoneWalk-in

On the canvas — surface/base

020406080JanFebMarAprMayJunWebPhoneWalk-in

How much: the sequential ramp

One hue, twilight, in five steps: 200 / 400 / 500 / 600 / 800 in light and the same list the other way in dark, so in both modes sequential-1 is the step nearest the canvas and a heatmap reads “more” as “further from the ground” — ink in light, light in dark. Steps 1 and 2 are under 3:1 against the canvas by construction: a heatmap’s low cell sits near its ground and is told apart by the legend and its neighbours, not by its own edge. What the suite holds is the lightness between neighbours, ΔL ≥ .09 in OKLCH, twice the surface ladder’s step, and 3:1 from step 3 on both surfaces. The wider ramp, 100 to 900, separates better and was refused: its dark 900 is 1.06:1 against a card, one surface step, so the low cell would vanish there.

Twilight rather than a multi-hue ramp: a ramp across families has the same figures to the decimal, since every family shares one lightness per stop, but in dark the order of the hues would reverse, and a map that changes direction with the mode is not one map. Twilight is the accent, but a cell has no button’s shape, and the accent as the first chart colour is Carbon’s and Cloudscape’s precedent.

On a card — surface/raised

MonTueWedThuFriSatSun9Mon 9:00 — 3Tue 9:00 — 5Wed 9:00 — 4Thu 9:00 — 6Fri 9:00 — 7Sat 9:00 — 2Sun 9:00 — 011Mon 11:00 — 8Tue 11:00 — 12Wed 11:00 — 11Thu 11:00 — 13Fri 11:00 — 14Sat 11:00 — 4Sun 11:00 — 113Mon 13:00 — 6Tue 13:00 — 9Wed 13:00 — 10Thu 13:00 — 9Fri 13:00 — 8Sat 13:00 — 5Sun 13:00 — 215Mon 15:00 — 10Tue 15:00 — 14Wed 15:00 — 15Thu 15:00 — 12Fri 15:00 — 11Sat 15:00 — 3Sun 15:00 — 117Mon 17:00 — 4Tue 17:00 — 6Wed 17:00 — 7Thu 17:00 — 5Fri 17:00 — 3Sat 17:00 — 1Sun 17:00 — 0fewermore

On the canvas — surface/base

MonTueWedThuFriSatSun9Mon 9:00 — 3Tue 9:00 — 5Wed 9:00 — 4Thu 9:00 — 6Fri 9:00 — 7Sat 9:00 — 2Sun 9:00 — 011Mon 11:00 — 8Tue 11:00 — 12Wed 11:00 — 11Thu 11:00 — 13Fri 11:00 — 14Sat 11:00 — 4Sun 11:00 — 113Mon 13:00 — 6Tue 13:00 — 9Wed 13:00 — 10Thu 13:00 — 9Fri 13:00 — 8Sat 13:00 — 5Sun 13:00 — 215Mon 15:00 — 10Tue 15:00 — 14Wed 15:00 — 15Thu 15:00 — 12Fri 15:00 — 11Sat 15:00 — 3Sun 15:00 — 117Mon 17:00 — 4Tue 17:00 — 6Wed 17:00 — 7Thu 17:00 — 5Fri 17:00 — 3Sat 17:00 — 1Sun 17:00 — 0fewermore

A value inside a cell

Takes text/primary on the steps near the canvas and interactive/on-accent — white in light, night/950 in dark — further out, each pairing held by the suite at AA. The light step 3 is twilight/500, the stop that carries no label at AA (4.15 with text/primary, 3.92 with white): a value on it is set as large text, which clears at 3:1, or sits beside the cell. The heatmap above keeps its values in the cells’ titles for that reason.

The sequential ramp, light
StepLightOn baseOn raisedA value in the cell
sequential-1
twilight/200
1.30recorded1.39recorded
primary
11.70AAA
sequential-2
twilight/400
ΔL 0.165 from the step before
2.34recorded2.52recorded
primary
6.47AA
sequential-3
twilight/500
ΔL 0.105 from the step before
3.653:13.923:1
primary, large text
4.153:1
sequential-4
twilight/600
ΔL 0.099 from the step before
5.55AA5.96AA
on-accent
5.96AA
sequential-5
twilight/800
ΔL 0.196 from the step before
12.28AAA13.19AAA
on-accent
13.19AAA
The sequential ramp, dark
StepDarkOn baseOn raisedA value in the cell
sequential-1
twilight/800
1.47recorded1.37recorded
primary
12.28AAA
sequential-2
twilight/600
ΔL 0.196 from the step before
3.27recorded3.03recorded
primary
5.55AA
sequential-3
twilight/500
ΔL 0.099 from the step before
4.97AA4.61AA
on-accent
4.97AA
sequential-4
twilight/400
ΔL 0.105 from the step before
7.73AAA7.18AAA
on-accent
7.73AAA
sequential-5
twilight/200
ΔL 0.165 from the step before
13.99AAA12.99AAA
on-accent
13.99AAA

Which side: the diverging ramp

Twilight against flare, three steps a side on a stone centre — ColorBrewer’s purple-orange pair, safe under the common colour-vision deficiencies, and never red against green. Neighbours are ΔL ≥ .16 apart at every step; the centre is stone, the neutral, because mist’s cyan cast would lean it towards one side. The warm side is “high” by the thermal convention and nothing more: a sign never rests on hue alone, so a diverging chart draws its zero line in border/strong and labels its axis with the sign.

On a card — surface/raised

-20%-10%+10%+20%Jan: -18%JanFeb: -9%FebMar: -3%MarApr: +4%AprMay: +11%MayJun: +22%JunJul: +15%JulAug: -12%Aug0

On the canvas — surface/base

-20%-10%+10%+20%Jan: -18%JanFeb: -9%FebMar: -3%MarApr: +4%AprMay: +11%MayJun: +22%JunJul: +15%JulAug: -12%Aug0
The diverging ramp, light
StepLightOn baseOn raisedA value in the cell
low-3
twilight/800
12.28AAA13.19AAA
on-accent
13.19AAA
low-2
twilight/600
ΔL 0.196 from the step before
5.55AA5.96AA
on-accent
5.96AA
low-1
twilight/400
ΔL 0.204 from the step before
2.34recorded2.52recorded
primary
6.47AA
mid
stone/200
ΔL 0.166 from the step before
1.27recorded1.36recorded
primary
11.93AAA
high-1
flare/400
ΔL 0.165 from the step before
2.36recorded2.53recorded
primary
6.43AA
high-2
flare/600
ΔL 0.206 from the step before
5.34AA5.74AA
on-accent
5.74AA
high-3
flare/800
ΔL 0.195 from the step before
11.84AAA12.72AAA
on-accent
12.72AAA
The diverging ramp, dark
StepDarkOn baseOn raisedA value in the cell
low-3
twilight/200
13.99AAA12.99AAA
on-accent
13.99AAA
low-2
twilight/400
ΔL 0.165 from the step before
7.73AAA7.18AAA
on-accent
7.73AAA
low-1
twilight/600
ΔL 0.204 from the step before
3.273:13.033:1
primary
5.55AA
mid
stone/800
ΔL 0.197 from the step before
1.58recorded1.47recorded
primary
11.43AAA
high-1
flare/600
ΔL 0.196 from the step before
3.393:13.153:1
primary
5.34AA
high-2
flare/400
ΔL 0.206 from the step before
7.68AAA7.13AAA
on-accent
7.68AAA
high-3
flare/200
ΔL 0.164 from the step before
14.00AAA13.00AAA
on-accent
14.00AAA

The rest of a chart

Uses tokens that exist. Gridlines border/subtle, an axis border/default, the zero line border/strong, tick and axis labels text/secondary, a title text/primary, a hovered bar the wash. The category text tokens, category/*-text, are the direct labels on the line chart above: text in the hue, at AA on a card. Everything else on a chart is the Colour page’s.

Not built

A Chart component. Pattern fills as tokens. A second sequential hue. Colour-vision simulation in the suite — the ΔL figures are the instrument, and a simulated view is a later page.