Explorable Explanations vs Isotype
エクスプローラブル・エクスプラネーション / アイソタイプ
Explorable Explanations comes from Reading on the Web and Isotype from Information Design. One is technique and the other layout. They are reached for with some of the same intent, which is where they get confused.
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.
Isotype
Translates quantity into repeated same-size symbols, making comparison readable before language.
| Explorable Explanations | Isotype | |
|---|---|---|
| Era | 2011– | 1920s–1940s |
| Family | Reading on the Web | Information Design |
| Kind | Technique | Layout |
| 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 | Unified pictograms / Repetition of signs / Axes of comparison / Restricted color |
| 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 | Statistics comparable without expertise · Basic guidance and education across languages |
| 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. | Short labels and clear figures; prose stays outside the chart |
| 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. | Fix the unit per symbol; show change by count, never by size |
| 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. | Few meaningful colors, equal line weights, aligned baselines |
| Caution | If the content only shows up once the reader touches something, everyone who does not touch it gets a blank article. | Never scale one big symbol to show a difference. Always show unit, base and source. |