Explorable Explanations

エクスプローラブル・エクスプラネーション / 2011– / Technique / Reading on the Web

The name Bret Victor gave, in a March 2011 essay of the same title, to writing that embeds a running model inside the prose. Numbers in the body text carry a dotted underline and can be dragged, and pulling one rewrites the rest of the sentence and the figure beside it at the same time. He described the result as a written argument whose assertions are backed by explorable computational models.

Explorable Explanations — Vi Hart and Nicky Case, Parable of the Polygons, 2014 — Wikimedia Commons / CC0 — Vi Hart and Nicky Case, Parable of the Polygons, 2014 — Wikimedia Commons / CC0 · CC0

Explorable Explanations — Nicky Case, To Build a Better Ballot, 2016 — Wikimedia Commons / CC0 — Nicky Case, To Build a Better Ballot, 2016 — Wikimedia Commons / CC0 · CC0

Explorable Explanations — Piotr Migdał, Virtual Lab by Quantum Flytrap, 2024 — Wikimedia Commons / CC BY-SA 4.0 — Piotr Migdał, Virtual Lab by Quantum Flytrap, 2024 — Wikimedia Commons / CC BY-SA 4.0 · CC BY-SA 4.0

At a glance

Visual cues

Numbers inside the running text sit on a dotted underline and turn blue when touched
Dragging one of those numbers rewrites the following sentence and the neighboring figure at once
Figures are not quarantined in a separate sandbox but sit continuous with the paragraphs around them
Untouched, the piece still reads, because the default values already make the figures meaningful

Best used for

Publishing an explanation built on a model, where readers should be able to change the assumptions themselves
Teaching material that has to show not just the conclusion but the conditions under which it flips

Use this style

Take the compact brief into a project or hand the structured version to an AI tool.

design.md image prompt JSON API MCP & machine access Compose

open in ChatGPT open in Claude open in Google AI

Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats

Dictionary entry

Type: Set the prose like ordinary reading matter; mark only the live numbers, with an underline and a color, and never with a different typeface.
Composition: Hold the text to a single column of roughly 600px and place each figure beside or directly after the paragraph it belongs to, close enough that the handle and its effect share one field of view.
Material: Limit the interaction to grabbing and dragging, with no input fields and no submit buttons, and always ship default values that already say something.
Caution: If the content only shows up once the reader touches something, everyone who does not touch it gets a blank article.
Further study: Bret Victor's 2011 article itself, and the Tangle implementation released with it / the difference between the three types, reactive document, explorable example and contextual information / writing the same argument once with a static figure and once with a variable one, and testing where understanding parts ways

Related entries

Isotype (アイソタイプ)Shared effects: Trust / Technique.Compare Explorable Explanations and Isotype
Flowchart (フローチャート)Shared effects: Technique / Trust / Play.Compare Explorable Explanations and Flowchart

Often confused with

Scrollytelling (スクロールテリング)compare

Cite this entry

The dictionary is meant to be linked to. Take whichever form fits where you are writing.

Link: https://indexstyle.org/styles/explorable-explanations
Markdown: [Explorable Explanations — IndexStyle](https://indexstyle.org/styles/explorable-explanations)
HTML: <a href="https://indexstyle.org/styles/explorable-explanations">Explorable Explanations — IndexStyle</a>

Back to index position