Phase 10Intermediate11 of 19 in Data Visualization

Colour, Typography and Responsive Charts

Pick colour scales that tell the truth, test them for colour-blind readers and contrast, set type that survives scaling, support dark mode, and redraw charts when their box resizes.

Until now every colour in the dashboard was typed into the chart code. That works on one monitor in one room. This phase asks what happens on the wall screen, in dark mode, on a phone, and for the one rider in twelve who sees colours differently.

You learn the three kinds of colour scale and which job each does, how colour-blind readers see a palette (and how to test it with code), the contrast ratios the web accessibility rules ask for, how to size and place text and annotations, how to move every colour into CSS tokens for light and dark, and how to redraw a chart when its box changes width.

At the end the dashboard has one theme.css, a colour-blind-safe palette, titles that state the finding, a theme button, and charts that choose their ticks and labels by width.

Phase 10 · the story

Priya, operations lead

“The dashboard looks fine on Arjun's monitor, but on the wall screen I can't read it, in dark mode the lines vanish, and one of our riders says two of the districts look identical.”

Lumen Bikes put the dashboard on a big screen in the operations room. From the back of the room the small grey labels vanish. At night Priya switches her laptop to dark mode and the charts glow white on white: the cards turned dark, but the bars kept their colours and the text kept its dark ink.

Then a rider who is red-green colour blind writes in. On the stacked chart, he says, two of the six districts look like the same muddy yellow. Arjun checks and finds he is right: the palette was picked by eye, and nobody tested it.

In this phase the team stops choosing colours by eye. They pick scales for each job, test the palette with code, move every colour into one theme file, and make the charts choose their ticks by width. By the end of the phase the same dashboard reads on a phone, on the wall screen, in dark mode and for riders who see colour differently.

In this phase

You will learn

Choose a sequential, diverging or categorical colour scale for the job, and say why a rainbow is the wrong one for order
Test a palette against colour-blindness simulation and the WCAG contrast thresholds, with code you run
Move every chart colour into CSS tokens, so light and dark mode are one switch
Redraw a chart when its box changes width, with fewer ticks and shorter labels on a phone

You write code in

In your Vite project lumen-dashboard/ (run npm run dev), and in the editor on this page

Files you touch

src/styles/theme.css
src/styles/charts.css
src/utils/resize.js
src/charts/*.js
src/main.js
index.html

0/6 · 0%

6 topics ~4 h 16 code blocks & diagrams

Start with the first topic

10.1

Colour Scales

Colour carries data in three ways: an ordered ramp (sequential), a ramp with a meaningful middle (diverging), or unrelated names (categorical). Each job needs its own scale, and a rainbow is wrong for order because its lightness goes up and down.

20 min 4 code practice

10.2

Colour Vision and Contrast

About 1 in 12 men and 1 in 200 women see some colours differently, and everyone loses colour on a bright wall screen. Test a palette with a simulation and with contrast ratios, and never let colour alone carry a meaning.

26 min 3 code practice

10.3

Typography and Annotation

Chart text is part of the data. Pick sizes that stay readable when the SVG scales, line numbers up with tabular digits, write titles that state the finding, and place annotations so they never sit on the data or run off the edge.

22 min 2 code practice

10.4

Dark Mode and Theme Tokens

Put every chart colour in CSS custom properties (tokens), draw SVG with var() and currentColor, and a theme becomes one switch with no redraw. Canvas and exported images do not read CSS, so they must be given the resolved colour and redrawn.

22 min 2 code practice

10.5

Responsive Charts

A chart can scale (one drawing, stretched by its viewBox) or redraw (a new drawing at the real width). Scaling is free but shrinks the text. Redrawing keeps text readable and lets you choose fewer ticks and shorter labels, at the cost of watching the box with a ResizeObserver, and of not redrawing on every pixel.

25 min 3 code practice

10.6

Build: A Themed, Responsive Dashboard

Move every chart colour into theme.css (light and dark), use a colour-blind-safe palette that passes contrast, write titles that state the finding, add a theme button, and make every chart redraw at its real width with fewer ticks when narrow.

135 min 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

Colour bars by value

Four bars show 10, 40, 70 and 100 rides. Colour them with a sequential scale: d3.scaleSequential(d3.interpolateViridis) with the domain 0 to 100, so the smallest bar is dark purple and the largest is yellow.

Beginner

Compute a WCAG contrast ratio

Write contrast(a, b) so it returns the WCAG contrast ratio of two hex colours: relative luminance is 0.2126 R + 0.7152 G + 0.0722 B of the linear channels (v / 12.92 if v <= 0.04045, else ((v + 0.055) / 1.055) ** 2.4, with v from 0 to 1), and the ratio is (lighter + 0.05) / (darker + 0.05).

Intermediate

One class switches the theme

The card has a light and a dark set of tokens, but the bar's colour is typed into the SVG attribute, so adding the class dark to the card changes nothing for the bar.