# Explorable Explanations (エクスプローラブル・エクスプラネーション)

> 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.

- IndexStyle No.531 — https://indexstyle.org/styles/explorable-explanations
- Kind: Technique · Family: Reading on the Web · Era: 2011–
- Mood: Technology, Play, Trust
- Color cues: #FFFFFF / #0000FF / #FDFFE9 (cues taken from reference works, not a fixed palette)

## Defining characteristics

- 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

## Composition recipe

- Typography & lettering: Set the prose like ordinary reading matter; mark only the live numbers, with an underline and a color, and never with a different typeface.
- Layout & structure: 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 & texture: Limit the interaction to grabbing and dragging, with no input fields and no submit buttons, and always ship default values that already say something.

## What to avoid

If the content only shows up once the reader touches something, everyone who does not touch it gets a blank article.

## Application checklist

Before calling a piece an application of this style, check it against the defining characteristics:

- [ ] 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
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Isotype (アイソタイプ)** — Translates quantity into repeated same-size symbols, making comparison readable before language. → https://indexstyle.org/styles/isotype
- **Flowchart (フローチャート)** — The Gilbreths invented this process diagram for work analysis. Its grammar of shapes gives a diamond to every decision and a rectangle to every process, and by way of programming it became the common language for thinking in steps. → https://indexstyle.org/styles/flowchart

## Further study

- Bret Victorの2011年の記事本体と、そこで公開されたTangleの実装
- reactive document、explorable example、contextual informationという3つの型の違い
- 同じ主張を静止した図と可変の図で書き分け、どこで理解が分かれるか試す

## Reference works

- Vi Hart／Nicky Case《Parable of the Polygons》2014年 — Wikimedia Commons / CC0 — https://commons.wikimedia.org/wiki/File:Parable%20of%20the%20Polygons%20-%20first%20board.png
- Nicky Case《To Build a Better Ballot》2016年 — Wikimedia Commons / CC0 — https://commons.wikimedia.org/wiki/File:To%20Build%20a%20Better%20Ballot%20Election%20result.gif
- Piotr Migdał《Virtual Lab by Quantum Flytrap》2024年 — Wikimedia Commons / CC BY-SA 4.0 — https://commons.wikimedia.org/wiki/File:Quantum%20teleportation%20-%20interactive%20simulation%20in%20Virtual%20Lab%20by%20Quantum%20Flytrap.png

## Source of record

- Bret Victor — Explorable Explanations (2011, 一次資料) — https://worrydream.com/ExplorableExplanations/

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/explorable-explanations
- Image-generation prompt (legally clean): https://indexstyle.org/styles/explorable-explanations/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compose_styles; prompts: image-prompt, apply-style)