# 02 · Infographic craft

## 0. The theory in one page (from the best pre-AI newsroom practice)

**Pick the visual channel by how accurately people read it** (Bertin, Mackinlay). From most to least accurate:
position on a shared scale → position on separate scales → length → angle → area → volume → colour saturation.
Use position and length for numbers that must be compared. Use colour hue only for categories (it has no order). Use lightness for ordered steps (light = less, dark = more).

| Visual variable | Good for |
|---|---|
| Position (x, y) | exact values, places, relations |
| Length / size | amounts and comparisons |
| Lightness | ordered levels, density |
| Hue | categories |
| Texture | categories, uncertainty |
| Orientation | direction, flow |
| Shape | categories, symbols |

**Choose the density for the reader** (Cairo's visualization wheel). A page for the general public leans to figurative pictures, familiar charts, light density and some repetition. A page for experts can be denser, more abstract and more novel. Decide this before drawing.

**Four layers of attention** (newsroom hierarchy):
1. The way in: headline, one framing sentence, and an anchor picture.
2. The evidence: the main chart, map or cut-away.
3. The explanation: labels, notes and numbered steps placed right next to what they explain ("show, don't tell").
4. The proof: sources, year, sample size, what is not counted.

**Decoration is allowed when it serves memory, never when it bends the data.** Pictures and visual metaphors help people remember the topic weeks later (Bateman 2010). They harm the page when they hide the baseline, distort sizes, or crowd a dense comparison.

**Honesty** (Tufte's lie factor = size of effect shown ÷ size of effect in the data; keep it between 0.95 and 1.05): bars start at zero; circles and icons scale by area (`r = Math.sqrt(value / Math.PI) * k`); no 3D tilt; maps of land are not maps of people.

**A still page must tell the whole story by itself.** Readers do not click or hover on an image (Archie Tse, New York Times). Put the main point in plain view.

**Data humanism** (Giorgia Lupi): behind every number there are people. Hand-made marks, notes and portraits of real lives make data warm and memorable, as long as the structure stays clear.

Good infographics come from newsroom graphics desks (South China Morning Post, The Straits Times, Reuters, the Houston Chronicle, National Geographic). They share a few habits. Follow them.

## 1. One idea, said as a finding

- The headline says **what we learn**, not the topic. Not "Biomass on Earth" but "Plants are almost all of life".
- One page = one main point. Everything else supports it.
- Write a short deck (1–2 sentences) under the headline: what, where, why it matters.

## 2. A clear reading order

1. **Kicker** (small, capitals, accent colour): the topic.
2. **Headline** (biggest text).
3. **Deck** (intro).
4. **The hero**: one big visual that carries the main point. It takes 40–60% of the page.
5. **Modules**: 2–4 small blocks with supporting facts (small charts, numbers, a map, a quote).
6. **Source line** at the bottom.

The eye should land on the hero first. Make one thing clearly the biggest. Do not give every block the same size.

## 3. Honest pictures of numbers

- Bars start at **zero**. Lengths are **to scale**: compute them from the numbers in code.
- Areas (circles, squares, treemaps) are to scale by **area**, not by side or radius: `side = Math.sqrt(value * k)`.
- Do not use 3D, tilted or exploded pie charts.
- Pick the chart that matches the question:
  - compare amounts → bars, dot plots, small squares to scale;
  - parts of a whole → stacked bar, treemap, 10 × 10 waffle (1 cell = 1%);
  - change over time → line, slope chart, timeline;
  - where → map with numbered points;
  - how it works → numbered steps on a picture, a cut-away, a flow.
- Label things **directly** (text next to the bar, the line or the place). Use a legend only when you must.
- Round numbers the way people speak ("about 450", "less than 1%"). Keep the units.

## 4. Detailing that makes it look professional

- **Margins**: at least 56 px around the page. Keep a column grid: 12 columns, 24 px gutter is a good start.
- **Space**: the same gap between blocks everywhere (for example 40 px). The same gap between a title and its content (for example 14 px).
- **Pictures that blend in**: use `blend: "multiply"` on light paper, `feather` for soft edges, duotone in the palette colours. Let the hero picture **bleed off one edge** of the page.
- **Thin lines** (1–2 px) for leader lines, rules and ticks. Leader lines join a label to the exact point.
- **Numbered steps**: a small accent circle with a white number, placed where the step happens.
- **One accent colour** carries meaning (the thing the reader should notice). Other colours stay calm.
- **Contrast**: dark text on light paper, or light text on dark paper. Never mid-grey text on mid-tone colour.

## 5. Human touch

The tool exists to make human-made designs. Add the touches from the style ticket, for example:

- hand-written notes (font `F.hand`) with small curved arrows: `ig.path("M x1 y1 Q cx cy x2 y2")` plus two short lines for the arrow head;
- a wobbly hand-drawn circle around the key number (a path with a slowly growing radius, drawn a little more than once around);
- tape strips, a torn-paper edge, a stamp, a sticky note (draw them with shapes and slight random wobble from `ig.rand(S.seed)`);
- a pencil or engraving look on one picture (`fx: {look: "pencil"}` or `"ink"`).

Small imperfections (1–3° rotation, a wobble of 1–2 px) feel human. Keep them small.

## 6. Layout ideas (from the style ticket)

| id | How it looks |
|---|---|
| `hero-cutaway` | One large picture or cut-away drawing (about 60% of the page) bleeding off one edge, with numbered steps on it; small modules below. |
| `treemap-hero` | Areas to scale fill the top half; dashed zoom lines open one small part into a bigger chart. |
| `big-number` | One huge number and one short line; three small facts below; lots of empty space. |
| `timeline` | A vertical or winding timeline; each stop has a date, one line and a small picture or icon. |
| `map-led` | A map is the hero with numbered callouts; a ranked list sits beside it. |
| `anatomy` | One object drawn large, parts labelled with thin leader lines. |
| `small-multiples` | A grid of 6–12 small identical charts with one shared scale. |
| `versus` | Two halves compare A and B row by row. |
| `process-loop` | 4–7 steps in a loop or a path with arrows. |
| `scale-ladder` | Things lined up by size, to scale, smallest to largest. |
| `dot-matrix` | Unit chart: 1 dot = a fixed number; groups coloured. |
| `magazine-grid` | Mixed modules on a 12-column grid: headline, a big chart, sidebar facts, a quote, a small map. |
| `radial` | Circular layout: a core with rings or spokes. |
| `annotated-chart` | One big chart with hand-written notes on the peaks and dips. |

## 7. Code habits that help the maker

- Draw in reading order (background first, then hero, then text) so the layers make sense.
- Give important objects a `name` ("Headline", "Hero picture", "Map") so they are easy to find in Layers.
- Compute positions from a few constants (`M = 56`, `COL = (1080 - 2*M - 11*24) / 12`) so the maker can change one number and the layout follows.
- Keep every number in one data list at the top, so the maker can check and change them.