// SLIDE 01 — HOOK

BAR CHART

AI tool adoption varies sharply by sector

Bar Chart — Figure 20.1 — AI tool adoption varies sharply by sector
NARRATION

AI tool adoption varies sharply by sector Figure 20.1 , AI tool adoption varies sharply by sector

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

A bar chart encodes quantitative values as the length of rectangular bars along a common baseline. Length along a shared

What this chart is — The horizontal orientation here is deliberate. With twelve or more categories, vertical bars compress label space, forci
NARRATION

A bar chart encodes quantitative values as the length of rectangular bars along a common baseline. Length along a shared axis is the most accurate perceptual channel available in static graphics , it outperforms area, angle, and color saturation in precision tasks. Each bar corresponds to a discrete category; the bars do not represent continuous data and cannot be meaningfully reordered to imply a trend over time. The horizontal orientation here is deliberate. With twelve or more categories, vertical bars compress label space, forcing rotation or truncation.

// SLIDE 03 — WHY IT WAS CHOSEN HERE

WHY IT WAS CHOSEN HERE.

The message — "AI tool adoption varies sharply by sector" — is a comparison story across named categories. The viewer ne

Why it was chosen here — The data structure is categorical (sector name) with a single quantitative measure (adoption %). There are no temporal p
NARRATION

The message , "AI tool adoption varies sharply by sector" , is a comparison story across named categories. The viewer needs to rank and contrast, not trace a trend or examine a composition. The bar chart's position-along-axis encoding is purpose-built for this: it exploits the most precise perceptual channel and makes the gap between leading and lagging sectors immediately visible. The data structure is categorical (sector name) with a single quantitative measure (adoption percent). There are no temporal periods, no part-to-whole relationship, no correlation between two variables.

// SLIDE 04 — WHAT THE ALTERNATIVE WOULD BRE

WHAT THE ALTERNATIVE WOULD BREAK.

A grouped bar chart (showing multiple years or sub-categories) would split attention and obscure the sector-level rankin

NARRATION

A grouped bar chart (showing multiple years or sub-categories) would split attention and obscure the sector-level ranking , the primary claim. A pie chart would require that the percentages sum to 100 percent, which they do not: these are independent adoption rates, not market share slices. Any attempt to represent this data as a pie would fabricate a compositional story that doesn't exist in the underlying numbers.

// SLIDE 05 — SORT ORDER IS PART OF THE ARGU

SORT ORDER IS PART OF THE ARGUMENT.

The bars are sorted descending by adoption rate by default. Sorted alphabetically, the chart answers "where is sector X?

NARRATION

The bars are sorted descending by adoption rate by default. Sorted alphabetically, the chart answers "where is sector X?" , a lookup task. Sorted by value, it answers "which sectors lead and which lag?" , the actual message. Sort order is not decoration: it determines which question the viewer answers first. A toggle is provided so both tasks remain accessible.

// SLIDE 06 — FRAMEWORK REFERENCE

FRAMEWORK REFERENCE

FRAMEWORK REFERENCE FT Visual Vocabulary — Ranking category. "Use where an item's position in an ordered list is more im

NARRATION

FRAMEWORK REFERENCE FT Visual Vocabulary , Ranking category. "Use where an item's position in an ordered list is more important than its absolute or relative value." Abela quadrant: Comparison (items, few periods). Tufte principle: the data-ink ratio here is near 1.0 , every pixel of bar encodes a value, axes carry the scale, labels carry the category identity. No grid lines are added unless they reduce ambiguity at the far end of the scale.

// SLIDE 07 — PROMPT

PROMPT

bar-chart.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
bar-chart/data.jsonthe data file the chart loads via d3.json("./bar-chart/data.json"), with a fallback inline literal in the HTML if the fe
·AI tool adoption rates by industry sector. Each record represents one sector survey result.
sectorstring — industry sector name (y-axis category label)
adoptionnumber — percentage (0–100) of organizations in this sector using at least one AI-powered tool
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 bar chart in D3 v7. Two files:

// SLIDE 08 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

Joseph PriestleyRun this:"Joseph Priestley"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. Joseph Priestley drew A Chart of Biography in 1765 , a horizontal bar chart spanning 1200 BC to 1750 AD, with each life as a line whose length encoded duration. It's one of the earliest published bar-style charts and the ancestor of every Gantt chart since. Joseph Priestley, circa 1790. AI-generated portrait based on a public domain engraving (Wikimedia Commons).

// SLIDE 09 — THESIS

THE CORE CLAIM.

The ideas in this chapter didn't appear from nowhere. Joseph Priestley drew A Chart of Biography in 1765 — a horizontal

Joseph Priestley, circa 1790. AI-generated portrait based on a public domain engraving (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. Joseph Priestley drew A Chart of Biography in 1765 , a horizontal bar chart spanning 1200 BC to 1750 AD, with each life as a line whose length encoded duration. It's one of the earliest published bar-style charts and the ancestor of every Gantt chart since. Joseph Priestley, circa 1790. AI-generated portrait based on a public domain engraving (Wikimedia Commons).

// SLIDE 10 — CLOSE

ASK THE QUESTION. APPLY THE FRAMEWORK.

WHAT THIS CHART IS//WHY IT WAS CHOSEN HERE//WHAT THE ALTERNATIVE WOUL

Brutalist D3 × Claude · Ch.20 · Bar Chart

NARRATION

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

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