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

Publishing it

Your chart is finished on a 27-inch monitor, in a browser, in daylight, by somebody who made it. It now has to survive a slide behind a presenter, a phone on a train, a black-and-white printer and a screen reader - and each of those removes something the others allowed. Tonight: what actually breaks in each container, dark mode as a second palette rather than an inversion, and the alt text that is not a description of the picture.

🟠 Hands-on Bring the chart you stripped in session 5 Final scorecard tonight 45 min
0-3 · Welcome 3-18 · Four containers, dark mode, print 18-40 · Build-along: survive all four 40-45 · Q&A
Part 0

Where we are

Five sessions of getting one chart right in one place. Tonight is the four other places it will be looked at, none of which you will be present for.

🎫 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 that survives four containers, a dark palette that was selected rather than inverted, alt text worth reading, and the course finished.

Part 1 · covers the containers

Four containers, four different things that break

6 min live
Container What it takes away So A report nothing - this is the easy one the hover layer is gone, so add the table A slide reading time, and fine detail one finding, bigger type, fewer marks A phone width, and hover entirely scroll-lock with a swipe hint, tap for values Print colour, and often all of it labels and texture, not hue The phone rule that people get wrong Squeezing a chart to 360px makes the axis labels about 4px tall, which is not a small chart - it is an unreadable one. Give it a minimum width, let it scroll, and show a swipe affordance.
🔍 Click to zoom - responsive does not mean "make it fit", it means "keep it readable"
LiveDark mode is a second palette, not an inversion4 min▶

Flipping a light chart to dark does not work, and the reason is arithmetic: contrast ratios do not survive inversion. A hue that sits comfortably on white is often too dark on near-black, and the whole palette needs re-stepping against the new surface.

  • Same hues, different steps. Not a different palette - the same eight hues, each moved along its own ramp until it passes against the dark surface. Identity stays stable across modes, which matters if somebody sees both.
  • Re-run the checks against the dark surface. Lightness band, chroma, CVD separation, contrast. It is the same validator with a different surface argument, and it takes seconds.
  • Never pure white on pure black. It is uncomfortable to read for any length of time. Off-white text on a near-black surface, both slightly off the extremes.
  • Cover both switches. The operating-system preference and the site's own toggle, with the toggle winning in both directions.

If you cannot maintain two palettes properly, ship one good one. A carefully validated light-only chart is better than a light chart and an automatically inverted dark one that nobody has checked.

Part 2 · covers the reader you cannot see

What a screen reader gets

6 min live

Most chart alt text describes the picture. That is the wrong content: somebody using a screen reader does not want to be told there is a bar chart with four bars, they want the finding and the numbers.

Useless alt="chart.png" · alt="Bar chart" · alt="" on a chart that carries a finding Better, and still describing the picture "A horizontal bar chart showing revenue for four coffee roasts, sorted descending" The finding, plus the route to the numbers "Ethiopia Guji earns most at $41,200 a month, 21 percent above Kenya Nyeri at $34,100. Full figures for all four roasts are in the table below."
🔍 Click to zoom - the third one is also a better caption for everybody else
Self-studyThe rest of the publishing checklist4 min▶
  • Forced-colours mode. High-contrast operating-system settings discard your palette entirely. Anything encoded only by hue disappears, which is the fourth independent reason for a second channel from session 4.
  • Reduced motion. If the chart animates on load, honour the preference. Two lines, and animation on a chart was never carrying meaning anyway.
  • Wide charts scroll, they do not shrink. Put a minimum width on the figure and let it scroll inside its own container, with a swipe affordance shown only when it actually overflows. The page itself must never scroll sideways.
  • Test on the real thing. Not a resized browser window - an actual phone, and an actual print preview. Both surface problems that a narrow desktop window does not.

One ordering note: desktop is the product and mobile is the floor. Every responsive rule belongs inside a max-width query, and after adding one you should confirm the desktop layout did not move.

Build-along

Survive all four

★ 22 min · everyone builds

The report. The hover layer is gone, so the table view has to be there. Check the provenance line from session 3 is under it.

The slide. One finding only. Type up, marks down, and the title carries the point because the room is reading it from four metres away while you talk.

The phone. Open it on a real device. Minimum width plus scroll plus a swipe hint, and tap-for-value instead of hover.

Print. Print preview in greyscale. Anything that vanishes was encoded by hue alone, and now you know which.

The reader. Alt text that states the finding and the two key numbers, and points at the table.

Open your chart on an actual phone. Not a resized window - the device. Note the first thing you cannot read.

Add a minimum width and let it scroll. Then add the swipe affordance, shown only when the content actually overflows. Squeezing was never the answer.

Print it in greyscale. Everything that disappears was hue-only. Add a label or a texture to each.

Make the slide version. Take the report version and remove until one finding remains. It is usually about half the marks and twice the type size.

Write the alt text as the finding. "Ethiopia Guji earns most at $41,200, 21 percent above Kenya Nyeri. Full figures in the table below." Notice it is also a better caption for sighted readers.

If you support dark mode, re-run the palette checks against the dark surface. If the answer is "we just invert it", that is the finding - either step the hues properly or ship light-only and say so.

Grade the whole thing below. Ship or not.

One written question, and the title states its answer From session 1. If the title names a category rather than a finding, it is a filing label.
One y-axis, form chosen from the job, and sorted where sorting helps From session 2. No dual axis, ever - and if you wanted one, you found a ratio instead.
Lie factor 1.00, bars from zero, and a line stating window, denominator and exclusions From session 3. The provenance line closes the four distortions the lie factor cannot see.
Colour has a named job, was measured rather than eyeballed, and nothing depends on hue alone From session 4. Including under greyscale and forced colours, not just under CVD.
It works on a phone and in print, and the alt text states the finding Tonight. Tested on the real device and a real print preview, not a narrow browser window.

If you take one thing from the whole course. Most of what makes a chart good is checkable - the proportionality, the contrast, the colour separation, the readability at width. Check those, and what remains is the genuinely creative part: which question, which form, and what to leave out.

After the course

Where to go from here

ongoing
  1. Measure the lie factor on one chart a week for a month. It becomes an instinct faster than you would expect.
  2. Run your team's palette through a CVD check and share the number. It is usually the first time anybody has.
  3. Rewrite the titles in one recurring deck from labels into findings. Highest-value retrofit available, and it works on charts you did not build.
  4. Add a table view to the chart people most often ask you for numbers from.
  5. Then go next door. learn-visual-storytelling-with-phoebe takes a set of charts and turns them into something somebody acts on - it starts exactly where this course stops. Also learn-business-intelligence-with-phoebe for dashboards, and learn-statistics-with-phoebe for what the numbers mean before you draw them.
Check yourself

Three questions

Clear all three and session 6 gets stamped - six of six.

1 · Your chart is unreadable at 360 pixels wide. What is the fix?

Squeezing to fit produces axis labels around four pixels tall, which is not a small chart but an unreadable one. Responsive means keeping it readable, not making it fit. And the page itself must never scroll sideways - only the figure's own container.

2 · Why can you not produce a dark-mode chart by inverting the light one?

It is the same eight hues, moved along their own ramps until each passes against the dark surface - identity stays stable, the steps change. Then re-run the checks with the dark surface. If you cannot maintain two palettes properly, one validated light palette beats a light one plus an unchecked inversion.

3 · What should a chart's alt text say?

"A horizontal bar chart with four bars" describes the picture, and the picture is not what the reader wanted. "Ethiopia Guji earns most at $41,200, 21 percent above Kenya Nyeri - full figures in the table below" gives the finding, the scale and the route to detail. The table is necessary and it is not a substitute for saying what the chart found.

Sources covered

What this session teaches, and where it came from

✓Four containersReport, slide, phone, print - with what each one removes and the change it forces
✓Responsive means readable, not smallerMinimum width, scroll inside the figure, a swipe affordance only when it overflows, and the page never scrolling sideways
✓Dark mode as a selected second paletteSame hues re-stepped against the dark surface, checks re-run, never pure white on pure black, and both switches covered
✓Print and forced coloursGreyscale as the honest test of whether anything depends on hue alone
✓Alt text as the findingNot a description of the picture. Three versions compared, and the good one doubles as a caption
◐Dashboard layout and governancelearn-business-intelligence-with-phoebe. Deliberately not here - two courses teaching one subject disagree eventually

Every fact on this page, and its verification tier, is recorded in the course's source map.

Session 6 cheat sheet · pin this

Four containersReport, slide, phone, print. Each removes something the others allowed.
Scroll, do not shrink4px axis labels is not a small chart, it is an unreadable one.
Dark is re-stepped, not flippedRatios do not survive inversion. Same hues, new steps, re-run the checks.
Greyscale is the honest testWhatever disappears was hue-only. Label it or texture it.
Alt text states the findingNot "a bar chart with four bars". It is a better caption too.
Desktop is the productMobile is the floor. Every responsive rule inside a max-width query.