System / Data visualisation
Data visualisation
Charts are where “evidence over adjectives” is most visible. The exemplar is NTWRK’s private insight report: horizontal bars, dot matrices and stacked bars in ink, Forest and sand, with mono n= notes under every chart.
01Principles
- The headline is the finding. “[N] of [M] stores did [X]”, not “Response rates by store”. Count and denominator in the headline.
- Every chart carries n, source and read date in mono 14px under the chart.
- Every value is available as a table (“Every value in this chart” link or a
<details>below). - Forest marks one thing: the owned, decision or focal value. Everything else is ink, ink-2 or sand.
- Show the limit. Where the method has a known gap, say it in a method note under the chart.
- No chart without data. If a picture is needed but there is no data, use a qualitative figure and say “Not a forecast.”
02Chart types
Headline states the finding, with the count and the denominator. Specimen values, not data
n=253 specimen items. Source, method and read date go here. Every value in this chart
Specimen values, not data Percentages of each group; n under each label.
Specimen values, not data One dot = one unit (store, policy, brand). Use when n ≤ 60.
Specimen values, not data Small multiples: two points per panel, before and after. Values set as HTML beside the end points.
| Use | Chart | Avoid |
|---|---|---|
| Rank categories | Horizontal bar, sorted | Vertical bars with rotated labels |
| Composition | 100% stacked horizontal bar, ≤4 segments | Pie and donut charts |
| Units (n ≤ 60) | Dot matrix | Icons as units |
| Change between two points | Slope or small multiples | Dual axes |
| Dates of events | Dot strip on a time axis | Smoothed lines |
03Colour order
| Order | Token | Role |
|---|---|---|
| 1 | --chart-c1 ink | The main comparison |
| 2 | --chart-c2 Forest | The owned, decision or focal value (only one) |
| 3 | --chart-c3 ink-2 | A second comparison |
| 4 | --chart-c4 sand | Remainder, other, not applicable |
| n/a | --chart-c-hollow | None or zero, as a hollow mark |
| n/a | --chart-c-expected | Expected or baseline, always dashed |
Never more than four series. Never rely on colour alone: label segments or use a legend with text.
04Annotation
- Values sit at the end of bars in mono 13 to 14px: count, then percentage.
- Labels sit above bars in sans 15/600, never inside narrow bars.
- Footnote:
n=[count] · [source] · read [date]. - Method notes go in the method panel (surface fill, 10px radius) directly under the chart, led by a bold phrase.
05Mobile rules
- Horizontal charts only on phones; anything with more than 6 columns becomes rows.
- Text inside charts is at least 14px at 390px wide. Measure it.
- No values hidden behind hover or tap; print them.
- Dot matrices wrap to 10 per row.
- The report gutter matches the site: 24px.
06The exemplar
See Client reports for the report page anatomy, redrawn with placeholder content.