// SLIDE 01 — HOOK

HISTOGRAM

Most commutes cluster between 20 and 40 minutes — a long tail of extreme commuters persists

Histogram — Figure 40.1 — Most commutes cluster between 20 and 40 minutes
NARRATION

Most commutes cluster between 20 and 40 minutes , a long tail of extreme commuters persists Figure 40.1 , Most commutes cluster between 20 and 40 minutes

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

A Histogram visualises the frequency distribution of a single continuous variable by dividing its range into equal-width

What this chart is — The perceptual mechanism is area: each bar's area (width × height) is proportional to the count or relative frequency it
NARRATION

A Histogram visualises the frequency distribution of a single continuous variable by dividing its range into equal-width intervals (bins) and drawing a bar for each bin whose height encodes how many observations fall within that interval. Unlike a Bar Chart, the x-axis is a continuous numeric scale , the bars are adjacent, with no gaps, because the underlying data has no categorical gaps either. The perceptual mechanism is area: each bar's area (width times height) is proportional to the count or relative frequency it represents.

// SLIDE 03 — WHY IT WAS CHOSEN HERE

WHY IT WAS CHOSEN HERE.

The message requires knowing where values concentrate across a continuous range — not how categories compare, not how so

Why it was chosen here — The right skew in this data — mean pulled above median, long tail to the right — is the actual finding. A summary statis
NARRATION

The message requires knowing where values concentrate across a continuous range , not how categories compare, not how something changed over time. Commute time is continuous: 23.4 minutes and 23.6 minutes are neighbouring values on a scale, not separate categories. The histogram is the correct chart when the variable is continuous and the question is distributional. The right skew in this data , mean pulled above median, long tail to the right , is the actual finding. A summary statistic (just the mean) would hide this completely.

// SLIDE 04 — BIN WIDTH IS AN EDITORIAL DECI

BIN WIDTH IS AN EDITORIAL DECISION.

Bin width is the single most consequential design choice in a histogram. Too narrow: every bar contains one or two obser

Bin width is an editorial decision — This implementation exposes the bin-width slider deliberately — it is a teaching tool. Slide from 2 minutes to 20 minute
NARRATION

Bin width is the single most consequential design choice in a histogram. Too narrow: every bar contains one or two observations; the chart looks like noise and the shape is unreadable. Too wide: genuine structure (bimodality, gaps, secondary peaks) gets smoothed away. The right bin width reveals the distribution shape without overfitting to sample noise. This implementation exposes the bin-width slider deliberately , it is a teaching tool. Slide from 2 minutes to 20 minutes and watch the same data tell different stories.

// SLIDE 05 — WHAT THE REJECTED ALTERNATIVES

WHAT THE REJECTED ALTERNATIVES BREAK.

A Bar Chart requires discrete, named categories. Applying it to continuous data requires first binning the values and as

What the rejected alternatives break — A Box Plot summarises the same distribution in five numbers (min, Q1, median, Q3, max). It is more compact and better fo
NARRATION

A Bar Chart requires discrete, named categories. Applying it to continuous data requires first binning the values and assigning labels , at which point you have rebuilt a histogram with gaps inserted for no reason. The gap signals a categorical break that doesn't exist in the data. A Box Plot summarises the same distribution in five numbers (min, Q1, median, Q3, max). It is more compact and better for comparing distributions across groups.

// SLIDE 06 — PROMPT

PROMPT

histogram.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
histogram/data.jsonthe data file the chart loads via d3.json("./histogram/data.json"), with a fallback inline literal in the HTML if the fe
·500 simulated daily one-way commute times in minutes.
valuenumber — one-way commute time in minutes (continuous, positive)
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 histogram in D3 v7. Two files:

// SLIDE 07 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Herman HollerithRun this:"Herman Hollerith"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Herman Hollerith developed the punch-card tabulating machine for the 1890 US Census , automating the production of frequency counts that became, when printed, the first machine-aided histograms. His company eventually became IBM. Herman Hollerith, circa 1890. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

// SLIDE 08 — THESIS

THE CORE CLAIM.

The ideas in this chapter didn't appear from nowhere. Herman Hollerith developed the punch-card tabulating machine for t

Herman Hollerith, circa 1890. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Herman Hollerith developed the punch-card tabulating machine for the 1890 US Census , automating the production of frequency counts that became, when printed, the first machine-aided histograms. His company eventually became IBM. Herman Hollerith, circa 1890. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

// SLIDE 09 — CLOSE

ASK THE QUESTION. APPLY THE FRAMEWORK.

WHAT THIS CHART IS//WHY IT WAS CHOSEN HERE//BIN WIDTH IS AN EDITORIAL

Brutalist D3 × Claude · Ch.40 · Histogram

NARRATION

That is the framework. Brutalist D3 times Claude, chapter 40: Histogram. The patterns are now in place. Apply them.

01 / 09
Brutalist D3 × Claude · Ch.40 · Nik Bear Brown