// SLIDE 01 — HOOK

BOX AND WHISKER PLOT

Five Numbers, One Glyph — Tukey's Distribution Sketch

Box and Whisker Plot — Figure 22.1 — Five Numbers, One Glyph — Tukey's Distribution Sketch
NARRATION

Five Numbers, One Glyph , Tukey's Distribution Sketch Figure 22.1 , Five Numbers, One Glyph , Tukey's Distribution Sketch

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

A box and whisker plot is the chart John Tukey introduced in Exploratory Data Analysis (1977) to summarise a univariate

What this chart is — The "box plot" name and the "box and whisker plot" name refer to the same chart. The longer name is Tukey's; the shorter
NARRATION

A box and whisker plot is the chart John Tukey introduced in Exploratory Data Analysis (1977) to summarise a univariate distribution as a single compact glyph. The glyph carries five numbers: the minimum (or lower fence), the first quartile (Q1), the median, the third quartile (Q3), and the maximum (or upper fence). The box spans Q1 to Q3 , the interquartile range, IQR , and contains the middle 50 percent of observations.

// SLIDE 03 — HOW TO READ THIS CHART

HOW TO READ THIS CHART.

Read the median line first. Its position tells you the center and, by its offset within the box, the direction and degre

How to read this chart — When several boxes appear side by side on a shared axis, the comparison reads at a glance: differences in median positio
NARRATION

Read the median line first. Its position tells you the center and, by its offset within the box, the direction and degree of skew: a median pushed toward the bottom of the box indicates a right-skewed distribution; pushed toward the top, left-skewed; centered, roughly symmetric. Read the box width second. A wide box means high variance in the middle 50 percent; a narrow box means tight clustering. Read the whisker lengths third. Asymmetric whiskers reveal tail asymmetry that the box itself cannot show. Read the outlier dots last.

// SLIDE 04 — WHY THE 1.5 × IQR RULE

WHY THE 1.5 × IQR RULE.

0.7%
of observations as potential outliers — small enough that a
50%
of the data, it is insensitive to the outliers it is trying
NARRATION

Tukey set the whisker length at 1.5 times IQR by deliberate calibration. Under a normal distribution, the rule flags roughly 0.7 percent of observations as potential outliers , small enough that a typical sample produces few flagged points, large enough that genuinely anomalous values are not absorbed into the whisker silently. The rule is robust: because IQR uses the middle 50 percent of the data, it is insensitive to the outliers it is trying to detect.

// SLIDE 05 — WHAT THE ALTERNATIVE WOULD BRE

WHAT THE ALTERNATIVE WOULD BREAK.

A bar chart of group means with error bars — the substitute most commonly chosen by audiences trained on parametric stat

What the alternative would break — A scatter of all individual points reveals everything the box plot summarises but collapses into overplotting at sample
NARRATION

A bar chart of group means with error bars , the substitute most commonly chosen by audiences trained on parametric statistics , assumes the distribution is roughly symmetric and approximately normal. The moment one group is skewed, the error bar either crosses zero (when zero is not a realistic value) or implies symmetric tails that do not exist in the data. The viewer reads the chart as if the groups differ in average; the real story is in skew or tail behavior the encoding has erased.

// SLIDE 06 — FRAMEWORK REFERENCE

FRAMEWORK REFERENCE

FRAMEWORK FT Visual Vocabulary category: Distribution — "Show the range of values in a dataset and how they are distribu

NARRATION

FRAMEWORK FT Visual Vocabulary category: Distribution , "Show the range of values in a dataset and how they are distributed." Abela quadrant: Distribution (single variable, multiple groups, comparison of shape). Tufte principle: the box plot is data-ink near 1.0 , every pixel of every glyph encodes a quantile, the median, a fence, or an outlier. The one design decision worth knowing: 1.5 times IQR for the whisker fence, set by Tukey in 1977, is the convention the chart's interpretive grammar depends on.

// SLIDE 07 — PROMPT

PROMPT

box-whisker.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
box-whisker/data.jsonthe data file the chart loads via d3.json("./box-whisker/data.json"), with a fallback inline literal in the HTML if the
·Three to six groups of continuous measurements, n=60–120 each, themed for an audience that cares about realistic distrib
groupstring — category label, drives the band axis
valuesnumber — raw measurements per group
NARRATION

Paste this into Claude Code to generate a working version of this chart, plus its data file. The result will not be a perfect replica , the goal is that the reader can run the prompt, get a chart of this type, and read its source. Generate a complete, self-contained box-and-whisker plot in D3 v7. Two files:

// SLIDE 08 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Andreas BujaRun this:"Andreas Buja"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Andreas Buja has worked across visualization, computational statistics, and exploratory data analysis since the 1980s , including foundational papers on interactive box-whisker variants and on the inferential interpretation of visual patterns. Andreas Buja, circa 1995. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

// SLIDE 09 — THESIS

THE CORE CLAIM.

The ideas in this chapter didn't appear from nowhere. Andreas Buja has worked across visualization, computational statis

Andreas Buja, circa 1995. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Andreas Buja has worked across visualization, computational statistics, and exploratory data analysis since the 1980s , including foundational papers on interactive box-whisker variants and on the inferential interpretation of visual patterns. Andreas Buja, circa 1995. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

// SLIDE 10 — CLOSE

ASK THE QUESTION. APPLY THE FRAMEWORK.

WHAT THIS CHART IS//HOW TO READ THIS CHART//WHY THE 1.5 × IQR RULE

Brutalist D3 × Claude · Ch.22 · Box and Whisker Plot

NARRATION

That is the framework. Brutalist D3 times Claude, chapter 22: Box and Whisker Plot. The patterns are now in place. Apply them.

01 / 10
Brutalist D3 × Claude · Ch.22 · Nik Bear Brown