〇 Data Visualization

Plotting & Data Visualization Guidelines

Companion to the SDSC UI Design Kit for scientific plots, charts, and data graphics. Covers colour palettes, colormaps, accessibility, and implementation across Python and JavaScript stacks.

Based on datascience.ch visual identity.

〇

1. Scope and Principles

The UI kit colours are optimized for interface chrome. Plots have different requirements — colours must encode data.

Colours must be distinguishable from each other (not just from the background), perceptually honest (equal data steps should look like equal visual steps), and readable by people with colour vision deficiency — approximately 5% of users.

Colour encodes meaning, never decoration

Every colour in a chart should answer 'what does this colour tell the reader?' If the answer is 'nothing', use one colour.

Never rely on colour alone

Pair colour with direct labels, markers, dash patterns, or annotation. This is the single most effective accessibility measure.

Match palette type to data type

Categorical data → categorical palette. Ordered data → sequential. Meaningful midpoint → diverging. Continuous fields → perceptually uniform colormaps.

〇

2. Chart Colours

Four palette types cover all chart scenarios. Choose the type that matches your data structure.

Categorical Palette

For distinct, unordered categories (line series, grouped bars, scatter groups). Use in this order — it is chosen so the first colours used are the most distinguishable.

Copy

#26235c

Chart Dark Blue

#26235c

1 · SDSC primary

Copy

#73a235

Chart Green

#73a235

2 · Accent green

Copy

#b34a00

Chart Orange

#b34a00

Copy

#56b4e9

Chart Sky Blue

#56b4e9

Copy

#cc79a7

Chart Pink

#cc79a7

Order	Name	Hex	Notes
1	Chart Dark Blue	`#26235c`	SDSC primary brand colour
2	Chart Green	`#73a235`	SDSC accent green, darkened for contrast on white
3	Chart Orange	`#b34a00`
4	Chart Sky Blue	`#56b4e9`
5	Chart Pink	`#cc79a7`

Maximum 5 categories

Beyond 4–5 series, no palette stays readable. Group small categories into "Other", or use small multiples (one panel per series).

One colour for single-variable bar charts

Bar charts with one variable use one colour (Chart Dark Blue), not one colour per bar. Colour only varies when it encodes something.

Focus / Highlight Charts

To draw attention to one series among many, colour it and mute the rest. This scales far beyond 5 series.

Copy

#26235c

Highlighted

#26235c

Copy

#73a235

Highlighted (alt)

#73a235

Copy

#b8b8b8

Muted context series

#b8b8b8

Sequential Palette (Ordered Categories)

For ordered categories (age bands, quintiles, ratings) in legends, stacked bars, or simple choropleths. Shades of brand dark blue with evenly spaced lightness (L* ≈ 18 / 34 / 53 / 72 / 89).

Copy

#26235c

Copy

#4a4889

Copy

#7a7ab5

Copy

#aaaed7

Copy

#dddeec

#26235c#4a4889#7a7ab5#aaaed7#dddeec

Use 3–5 steps. The lightest steps fall below 3:1 contrast on white — separate areas with thin white/grey borders and label values directly.

Diverging Palette

For data with a meaningful midpoint (above/below zero, agree/disagree). Diverges from a near-neutral centre to brand blue and chart orange.

Copy

#26235c

Copy

#7a7ab5

Copy

#f0eeeb

Copy

#cf7d42

Copy

#b34a00

#26235c#7a7ab5#f0eeeb#cf7d42#b34a00

Only use diverging when the midpoint is meaningful

Which end is "negative" is your choice — keep it consistent across all charts in the same product or publication.

Dark Mode

The categorical palette inverts poorly on dark backgrounds (#26235c is invisible on #2d2d2d). In dark mode use lightened variants, and prefer ≤ 4 series.

Copy

#8a94c9

Dark Blue

#8a94c9

Replaces #26235c

Copy

#90ca42

Green

#90ca42

Replaces #73a235

Copy

#e07b39

Orange

#e07b39

Replaces #b34a00

Copy

#56b4e9

Sky Blue

#56b4e9

Unchanged

Copy

#cc79a7

Pink

#cc79a7

Unchanged

How These Palettes Were Verified

≥3:1

Contrast check

Every categorical colour has ≥ 3:1 contrast against white (WCAG 2.1 SC 1.4.11 for graphical objects).

CVD

Colour vision deficiency

Simulated for protanopia, deuteranopia, and tritanopia using Machado et al. 2009 matrices.

ΔLAB

Pairwise difference

Minimum pairwise colour difference checked in CIELAB. Tightest pair is Green vs Orange under deuteranopia.

Re-run checks after any palette change

python3 scripts/verify_chart_palettes.py (no dependencies). For interactive checking use viz-palette or Coblis.

〇

3. Continuous Data: Colormaps

For heatmaps, density plots, geospatial fields — anywhere colour represents a continuous value.

Never use rainbow/jet

Rainbow colormaps create false boundaries in smooth data and hide real ones (Crameri et al. 2020). This is a correctness issue, not a style preference. Never use red–green encodings for continuous data.

Do not build colormaps from brand colours. Use established perceptually uniform, CVD-safe colormaps:

Data type	Recommended approach	Examples
Sequential (zero → max)	Perceptually uniform sequential map	`viridiscividisbatlow`
Diverging (meaningful midpoint)	Perceptually uniform diverging map	`vikromaRdBu`
Cyclic (phase / angle / time-of-day)	Cyclic map	`twilightromaO`

viridis — sequential

RdBu — diverging

twilight — cyclic

Always show a colour bar

Show a colour bar with units; state if the scale is clipped or log-transformed.

Greyscale check

If the figure may be printed in greyscale, verify the colormap is monotonic in lightness. viridis, cividis, and batlow are; rainbow is not.

〇

4. Typography in Plots

Consistent font choices across all chart elements support readability and brand cohesion.

Element	Font	Size (min)	Colour
Chart title	`Space Grotesk, 600`	`16 px min`	`#000000`
Subtitle / caption	`Switzer, 400`	`12 px min`	`#848484`
Axis & data labels	`Switzer, 400`	`12 px min`	`#404040`
Direct series labels	`Switzer, 500`	`12 px min`	`series colour ≥ 4.5:1`

Caption contrast note

#848484 is 3.7:1 on white — acceptable for large text only. Use #6b6b6b for small captions (below 18.66 px / 14 px bold).

Print / PDF export

For figures exported to print or papers, embed fonts or fall back to a standard sans (Helvetica/Arial) rather than letting the renderer substitute.

〇

5. Accessibility Checklist for Charts

Adapted from the Government Analysis Function 'accessible charts' checklist. Before shipping a chart, verify all items below.

Information is not conveyed by colour alone (labels, markers, patterns as backup) ≤ 5 colour-coded series (≤ 4 in dark mode); palette used in defined order All essential graphical elements ≥ 3:1 contrast against their background Text in/around the chart ≥ 12 px and ≥ 4.5:1 contrast Checked under CVD simulation (browser dev tools or Coblis) Title/alt text states the message of the chart, not just its topic Interactive charts: keyboard-reachable tooltips, and underlying data downloadable or in a table Units, sources, and uncertainty definitions present Survives greyscale printing

4.5:1

Text contrast minimum

3:1

Graphical object minimum

12 px

Minimum chart text size

〇

6. Implementation

Define the palette once per stack. Never hard-code hex values inside individual plots.

All chart colours are available as CSS custom properties and language-specific constants. Reference these tokens in every chart implementation rather than repeating hex values.

CSS / JS tokens

tokens.css

:root {
  --chart-cat-1: #26235c;
  --chart-cat-2: #73a235;
  --chart-cat-3: #b34a00;
  --chart-cat-4: #56b4e9;
  --chart-cat-5: #cc79a7;
  --chart-muted: #b8b8b8;
  --chart-grid:  #e5e5e5;
}
.dark {
  --chart-cat-1: #8a94c9;
  --chart-cat-2: #90ca42;
  --chart-cat-3: #e07b39;
}

Matplotlib (Python)

sdsc_theme.py

import matplotlib as mpl

SDSC_CATEGORICAL = ["#26235c", "#73a235", "#b34a00", "#56b4e9", "#cc79a7"]

mpl.rcParams.update({
    "axes.prop_cycle": mpl.cycler(color=SDSC_CATEGORICAL),
    "image.cmap": "viridis",
    "axes.grid": True, "axes.grid.axis": "y",
    "grid.color": "#e5e5e5", "axes.edgecolor": "#848484",
    "axes.spines.top": False, "axes.spines.right": False,
    "font.size": 12, "figure.dpi": 150,
})

Plotly (Python / JS)

sdsc_plotly_theme.py

import plotly.io as pio
import plotly.graph_objects as go

pio.templates["sdsc"] = go.layout.Template(layout={
    "colorway": ["#26235c", "#73a235", "#b34a00", "#56b4e9", "#cc79a7"],
    "colorscale": {"sequential": "Viridis"},
    "font": {"size": 12},
    "xaxis": {"showgrid": False},
    "yaxis": {"gridcolor": "#e5e5e5"},
    "plot_bgcolor": "white",
})
pio.templates.default = "sdsc"

Crameri colormaps

pip install cmcrameri (Python) or the scico package (R) provide the full Scientific colour maps collection.

〇

7. References

Authoritative sources behind every recommendation in this document.

Plotting & Data Visualization Guidelines

Build with a coding agent

1. Scope and Principles

Colour encodes meaning, never decoration

Never rely on colour alone

Match palette type to data type

2. Chart Colours

Categorical Palette

Focus / Highlight Charts

Sequential Palette (Ordered Categories)

Diverging Palette

Dark Mode

How These Palettes Were Verified

3. Continuous Data: Colormaps

4. Typography in Plots

5. Accessibility Checklist for Charts

6. Implementation

7. References

Colour in charts

Scientific colormaps

Figure design

Uncertainty