Cool. The code might look scary but it's intuitive. The mermaid diagram lib is preinstalled in Observable notebooks. The diagrams can be created with the template literal mermaid``.

A range input is set up, which returns the number at which the slider or text input is set. This immediately dispatches on any changes.

The diagram cell takes advantage of this reactive dispatching. It passes the result of a chain of ternary clauses, almost like a switch statement.

The cool thing is that you can approach this in a few other ways. You can access an array item if you use the range output as a computed array index, the returned item will correspond with the number set in the range input. Tom added that example as well, in the cell above the diagram cell.

Finally, he mentioned that the user can move the animation at their own pace. That means, using the included Promises lib (not 'Promise', that's a JS module), you can use the .interval or .tick methods to yield a new value at every x msecs. Now instead of having the animation hooked up to the manual range input, you hook it up to the tick method and you've got yourself the basis of a slideshow.

Try it. Just start editing the code, and a copy is automatically made for you to fork. Yes, you can do pull requests on notebooks!

Observable should hire me right?