Play the algorithm. Put the reader in the "mind" of the algorithm (first person) while also seeing the algorithm's high level behavior (third person).
- Prime Numbers (Philipp Legner, World of Mathematics) see "The Sieve of Eratosthenes"
- A visual proof that neural nets can compute any function (Michael Nielsen, Neural Networks and Deep Learning) see "get as many peaks as we want"
Make time spatial and playable. Juxtapose a time line (spatial, third person view of time) with a play button to experience actual time (first person).
- Fractions of a Second: An Olympic Musical (Amanda Cox, NYT)
- Slow Time (Toby Schachman)
Encourage the reader to ask "What if..." questions, then set up the scenarios to answer the questions.
- Introduction to A* (Amit Patel, Red Blob Games)
Start with something impressive that also serves as an overview. Answer "So What?"
- Earth, a Primer (Chaim Gingold) shows the full system running when it introduces the camera controls at the beginning
Constrained → Unconstrained.
Introduce "mechanics" one at a time in isolation, then combine them.
- Earth, a Primer (Chaim Gingold)
- Miegakure (Marc ten Bosch)
Overview → Deconstruct → Reconstruct.
- Sight and Light (Nicky Case)
End with a sandbox.
- Earth, a Primer (Chaim Gingold)
Go too far → Fail → Take a step back.
- Introduction to A* (Amit Patel, Red Blob Games)
Synchronize text and diagram ("Tangle").
Synchronize state between side-by-side diagrams.
- Introduction to A* (Amit Patel, Red Blob Games)
Synchronize scroll position between media objects.
- Eyes on the Prize (Glen Chiacchieri)
Connecting lines.
- Riding the New Silk Road (Shan Carter, Hannah Fairfield, and Derek Watkins, NYT)
Connecting hover to highlight the same element within multiple contexts, or to see a chain of causality.
- Matrix (Nicky Case)
Click text to set diagram state.
- Up and Down the Ladder of Abstraction (Bret Victor) see "Stepping Back Down"
- 512 Paths to the White House (Mike Bostock and Shan Carter, NYT)
Click or hover text to highlight part of the diagram.
- Up and Down the Ladder of Abstraction (Bret Victor) see "Abstracting the Algorithm"
Observe how you explain the topic with your hands to surface interactions.
Transparency (all state visible). Do a one-page "design document" with minimal text to surface a visual vocabulary for the model (also scopes the project)
Hey Toby, this is really great, thanks for putting this up!
Question: do you intend for this page to be a catalog of explorable explanations in general, or is this page mainly theory with 1-2 examples present just to illustrate each pattern?
I'm asking because I have some more links to explanations people have done (that weren't mentioned over the weekend), and I want to put them on some 'master list' somewhere.