// SLIDE 01 — HOOK

VENN DIAGRAM

The Three Skill Domains for Effective AI Collaboration

Venn Diagram — Figure 76.1 — The Three Skill Domains
NARRATION

The Three Skill Domains for Effective AI Collaboration Figure 76.1 , The Three Skill Domains

// SLIDE 02 — WHAT THIS CHART IS

WHAT THIS CHART IS.

A Venn diagram displays all possible logical relationships between a collection of sets using overlapping circles. Every

NARRATION

A Venn diagram displays all possible logical relationships between a collection of sets using overlapping circles. Every possible combination of set membership is assigned a distinct region: for three sets A, B, C, there are seven regions , three exclusive zones (A only, B only, C only), three pairwise intersections (A∩B, A∩C, B∩C), and one triple intersection (A∩B∩C). The perceptual mechanism is spatial containment and overlap: membership in a set is encoded by position within a circle, and shared membership by position in the overlap area.

// SLIDE 03 — WHY IT WAS CHOSEN HERE

WHY IT WAS CHOSEN HERE.

The subject — skill domains for AI collaboration — has genuine set-theoretic structure: the three domains are meaningful

NARRATION

The subject , skill domains for AI collaboration , has genuine set-theoretic structure: the three domains are meaningful in isolation, in every pairwise combination, and in full intersection. The triple intersection (AI Collaborator) is the chart's thesis, and the Venn diagram makes it structurally unavoidable , the viewer's eye is drawn to the centre by the geometry. No other chart type communicates the message "you need all three to occupy the ideal position" with the same directness.

// SLIDE 04 — WHAT THE ALTERNATIVE WOULD BRE

WHAT THE ALTERNATIVE WOULD BREAK.

An Euler diagram is the closest structural relative and is often the more honest choice: Euler diagrams only draw circle

NARRATION

An Euler diagram is the closest structural relative and is often the more honest choice: Euler diagrams only draw circles that have actual members, and size circles proportionally to set cardinality, while Venn diagrams draw all possible intersections regardless of whether they are populated. For conceptual diagrams where all seven regions are meaningful (as here), the Venn diagram is appropriate. For data-driven diagrams where some intersections are empty, the Euler diagram avoids implying relationships that don't exist.

// SLIDE 05 — FRAMEWORK REFERENCE

FRAMEWORK REFERENCE

FRAMEWORK FT Visual Vocabulary category: Relationships / Concepts — "Show logical membership and overlap between defined

NARRATION

FRAMEWORK FT Visual Vocabulary category: Relationships / Concepts , "Show logical membership and overlap between defined categories." The one design decision worth knowing: in a three-set Venn diagram, all seven regions must be geometrically accessible , each intersection zone must be large enough to label and click. The standard equilateral arrangement (three circles at 120° offsets, each pair overlapping by ~30 percent of the radius) achieves this and is used here exactly.

// SLIDE 06 — PROMPT

PROMPT

venn-diagram.htmla full HTML page with inline CSS and inline D3 v7 (loaded from The chart should fill the viewport, be responsive on resi
venn-diagram/data.jsonthe data file the chart loads via d3.json("./venn-diagram/data.json"), with a fallback inline literal in the HTML if the
·Three-set Venn diagram data. Seven regions covering all combinations of membership in sets A, B, C. Replace sets and reg
sets.idstring — single uppercase letter: A, B, or C
sets.labelstring — set name (\n for two-line label)
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 venn diagram in D3 v7. Two files:

// SLIDE 07 — AI WAYBACK MACHINE

AI WAYBACK MACHINE.

John VennRun this:"John Venn"Now make the prompt better.
NARRATION

The ideas in this chapter didn't appear from nowhere. John Venn introduced the diagram bearing his name in 1880 , though he was extending earlier work by Euler , by drawing overlapping circles to represent logical relationships among sets. He was an English logician and Anglican priest. John Venn, circa 1880. 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. John Venn introduced the diagram bearing his name in 1880 — though

John Venn, circa 1880. AI-generated portrait based on a public domain photograph (Wikimedia Commons).

NARRATION

The ideas in this chapter didn't appear from nowhere. John Venn introduced the diagram bearing his name in 1880 , though he was extending earlier work by Euler , by drawing overlapping circles to represent logical relationships among sets. He was an English logician and Anglican priest. John Venn, circa 1880. 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//WHAT THE ALTERNATIVE WOUL

Brutalist D3 × Claude · Ch.76 · Venn Diagram

NARRATION

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

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