31:[] 2f:{"title":"Explorable Explanations - incremental interactivity","cells":[{"id":0,"value":"# Explorable Explanations - incremental interactivity","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"One thing I like to do when making explorable explanations it to *incrementally* add interactivity to a diagram. Let's see how this works. Start with an SVG, maybe from Inkscape or some other SVG editor, but in this example I'll make it by hand:","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":55,"value":"Now I'd like to make it interactive in some way. Let's add control over the x position:","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"viewof xPosition = Inputs.range([0, 600], {label: \"X position\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":62,"value":"Usually in my explorable explanations there's some type of **inputs** and then there's a calculation or algorithm that generates some **outputs**. Let's define the Y position in terms of the X position. Think of this like a spreadsheet formula:","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"yPosition = 25 * (1 + Math.cos(xPosition / 30))","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"Here's the same diagram where the Y position is calculated from the formula:","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"\n

Hello there is a ball at ${Math.round(yPosition)}!

","pinned":true,"hidden":false,"mode":"html"},{"id":94,"value":"This type of incremental addition means the entire time, I have a *working* system. It lets me *start small*. I can test it, make sure it works, and then add a little bit more. It's one of the main reasons I use SVG with Vue or ObservableHQ instead of using Canvas (which has an \"imperative\" interface) or React (which requires I move everything out of my static document into javascript). Vue and ObservableHQ give me the spreadsheet-like approach of a formula that recalculates automatically when the inputs change.","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"

Some CSS:

\n\n ","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}