learn-dataviz-with-phoebe / Session 5 of 6
Learn Data Visualization with Phoebe · Session 5 of 6

Marks and anatomy

By this point the chart is honest and its colour has a job. Tonight is entirely subtraction: making the scaffolding recede until somebody looks for it, replacing the legend with labels on the marks themselves, keeping text in text colours, and adding the two things an HTML chart should always have and almost never does - a hover layer and a table view.

🟠 Hands-on Bring a busy chart Halfway scorecard tonight 45 min
0-3 · Welcome 3-18 · Recede, label, and the hover layer 18-40 · Build-along: strip one chart 40-45 · Q&A
Part 0

Where we are

Sessions 3 and 4 were about being right. Tonight is about being read, and almost all of it is removing things you already put in.

🎫 Clear all three quiz questions to stamp your passport Live = presented in the 45 minutes Self-study = the full depth, after class

★ What you walk out with tonight. One chart stripped to its marks, its legend replaced by labels, a hover layer specified, a table view added, and a halfway grade.

Part 1 · covers recession

The grid is scaffolding, not data

6 min live

Everything that is not the data should be quieter than the data. That single instruction fixes about half of what makes a chart look amateur, and it costs nothing.

Loudest The data marks. Everything else exists to serve these Direct labels and the title, in ink Axis labels and tick values The axis line itself Gridlines - visible when looked for, invisible when not Quietest If your gridlines are as dark as your bars, the chart is telling the reader they matter equally.
🔍 Click to zoom - a ranking, and most charts have it roughly upside down
LiveDirect labels beat a legend, nearly always4 min▶

A legend is a matching exercise: the reader looks at a mark, goes to the legend, finds the swatch, comes back, and repeats for every series. A direct label is just there.

  • One series needs no legend at all. The title names it. A legend box with one entry is pure furniture.
  • Two to four series: label them directly at the end of the line or inside the bar, and keep a legend as well if the chart appears without its title anywhere.
  • Five or more: you have a session 2 problem. Small multiples, or grey-the-rest with the one you mean labelled.
  • Never a number on every point. Label the first, the last, the peak and anything you are making a claim about. Labelling everything is the same as labelling nothing.

Direct labels also do accessibility work: they are the second channel from session 4, and they are what discharges a contrast warning on a lighter series colour. One decision, three problems solved.

Dark gridlines both directions, a boxed border, a legend with one entry, the value printed above every bar in the series colour, a y-axis titled "Revenue (USD)", and a drop shadow.

Six elements competing with four bars. The reader's eye lands on the grid first because it has the most edges, and the numbers in blue read as part of the data rather than as a description of it.

Four bars. Category names to the left in ink, values inside the bars in white, four faint vertical gridlines, one thin axis line, and the title stating the finding.

Nothing was added. The border, the legend, the axis title, the shadow and half the gridlines were removed, and the values changed from the series colour to text colour. It now reads in about a second.

Part 2 · covers the two missing layers

Hover and the table view

6 min live

An HTML chart is an interactive object whether or not you designed it as one. Two layers cost very little and are missing from most charts on most internal tools.

The hover layer Crosshair and tooltip on lines and areas. Per-mark tooltip on bars, dots and cells. Hit target larger than the mark. Solves: exact values, without printing a number on every point The table view The same data, as rows, behind a disclosure the reader can open. Solves: screen readers, copy-paste, print, a contrast warning, and the person who wanted the figures all along The table view is not a fallback for people who cannot see the chart. It is where the exact numbers live, and a large share of readers wanted those in the first place.
🔍 Click to zoom - the bench in session 3 has both; open the disclosure under its chart
Self-studyMark specifics worth getting right4 min▶
  • Thin marks. 2px lines, markers of at least 8px so they can be hovered, bars with a small radius on the data end only - a bar rounded at the baseline is floating.
  • A gap between fills. Two pixels of surface between stacked segments and between adjacent bars. Without it, two dark segments merge into one shape.
  • A surface ring on overlapping marks. Two pixels of the background colour around a dot that sits on a line, so the dot reads as in front rather than as a bulge.
  • Text wears text colours. A value label in the series hue reads as data. Keep labels, values and legends in ink and let the coloured mark beside them carry the identity.

None of these are noticeable individually. Together they are most of the difference between a chart that looks made and one that looks generated, and every one of them is a two-minute change.

Build-along

Strip one chart

★ 22 min · everyone builds

The rule for the next twenty minutes: you may only remove things and change colours to quieter ones. Nothing may be added except labels.

Rank it. List every visible element and order it by how loud it currently is. Compare against the ranking above. Most charts have the grid too high and the labels too low.

Remove. The border, the drop shadow, one direction of gridlines, the axis title if the tick labels already say it, and the legend if there is one series.

Label. Direct labels on the marks. First, last, peak, and anything you are making a claim about - not every point.

Recolour text. Every value, label and legend entry into ink or muted ink. Colour stays on the marks.

Add the two layers. A hover tooltip and a table view. Together they are the only additions allowed tonight, and they remove the pressure to print numbers everywhere.

Take your busiest real chart and list its elements. Ten to fifteen is normal. Four to six is where you are heading.

Delete the border and the shadow first. They are pure furniture and nobody has ever missed them.

Drop one direction of gridlines. Bars need lines along the value axis only. The perpendicular set is separating categories that are already separated by being separate bars.

Fade what remains until you have to look for it. If you can see the grid while reading the data, it is too dark.

Kill the legend. One series means no legend. Two to four means direct labels. Five or more means you have a session 2 problem and should go back.

Recolour every number to ink. This is the change people find most surprising - coloured value labels look deliberate and read as data.

Specify the hover and the table. Write down what the tooltip says and what the table columns are. Even if you are not the one building it, this is a two-line spec.

Count your elements again and grade the work below.

The chart has one written question, and the title states its answer From session 1. "Ethiopia Guji earns most, by 21 percent", not "Revenue by roast".
One y-axis, and the form was chosen from the job From session 2. If you wanted a second axis, you found a ratio instead.
Lie factor 1.00, and there is a line saying window, denominator and exclusions From session 3. Bars from zero. The provenance line closes what the lie factor cannot see.
Colour has a named job, and nothing depends on hue alone From session 4. One series one colour, and a label, position or texture as the second channel.
The grid recedes, labels are direct, text is in ink, and there is a table view Tonight. Count the elements: four to six, not twelve.

If you take one thing from tonight. Fade the gridlines until you have to look for them. It takes ten seconds, it changes no data, and it is the single most visible difference between a chart that looks made and one that looks generated.

Homework

Before session 6

25 min
  1. Strip three real charts by removal only. Count elements before and after.
  2. Replace one legend with direct labels and check nothing was lost.
  3. Recolour every value label to ink in one deck. It is a find-and-replace and it changes how the whole thing reads.
  4. Add a table view to one chart people keep asking you for the numbers from.
  5. Open your best chart on a phone before session 6, and note exactly what breaks. Session 6 is about that.
Check yourself

Three questions

Clear all three and session 5 gets stamped in your passport.

1 · Your value labels are printed in the same colour as the bars. What is wrong?

Contrast is a separate check and it may well pass. The problem is semantic: colour in this chart means something, and putting it on text spends that meaning on an element that is not encoding anything. It is also the change people are most surprised by when they make it.

2 · When does a chart not need a legend at all?

A legend is a matching exercise, and with one series there is nothing to match. Two to four series get direct labels on the marks instead, which also serves as the second channel from session 4. Five or more is a session 2 problem, not a legend problem.

3 · Why is a table view not a consolation prize?

Treating the table as a fallback for people who cannot see the chart misses that it is where the exact numbers live. It solves five separate problems at once, which is an unusual ratio, and it removes the pressure to print a value on every mark.

Sources covered

What this session teaches, and where it came from

✓Visual loudness, rankedMarks, then labels, then axis text, then the axis line, then the grid - and most charts have it upside down
✓Direct labels over legendsNone for one series, direct for two to four, a session 2 problem beyond that. Never a number on every point
✓Text wears text coloursA value label in the series hue reads as data. Colour stays on the marks
✓Mark specificsThin lines, 8px markers, radius on the data end only, a 2px surface gap between fills, a surface ring on overlaps
✓The hover layer and the table viewWhat each solves, and why the table is where the exact numbers live rather than a fallback
◐AnimationNamed, with the caution that animated transitions between unrelated states teach nothing and cost attention

Every fact on this page, and its verification tier, is recorded in the course's source map. The session 3 bench implements every rule in this session, including the table view.

Session 5 cheat sheet · pin this

Everything quieter than the dataFixes about half of what makes a chart look amateur.
Fade the gridIf you can see it while reading the data, it is too dark.
One series, no legendThe title names it. A one-entry legend is furniture.
Not a number on every pointFirst, last, peak, and whatever you are claiming.
Text in inkValues in the series colour read as data.
Hover and a tableThe only two things worth adding. The table solves five problems.