2c:null 2d:["$","title",null,{"children":"Explorable Explanations - incremental interactivity | Amit Patel | Observable"}] 32:[] 30:{"id":"86837768a891dec5","slug":"incremental-interactivity","title":"Explorable Explanations - incremental interactivity","thumbnail":"64caec3c1cbd4b00e624ed64a1bd8ab072710d7ea435f895033383706c869cce","access_level":"public","create_time":"$D2022-04-26T21:40:40.975Z","update_time":"$D2022-04-27T21:06:29.661Z","view_time":null,"first_public_time":"$D2022-04-26T22:20:31.732Z","has_unpublished_edits":null,"fork":{"id":"e57692300453779b","slug":"interactive-svg","title":"Interactive SVG","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"468ec444dc0eb0ae","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":"starter_2024"},"version":128,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null}],"members":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Explorable Explanations - incremental interactivity","cells":[{"id":0,"value":"# Explorable Explanations - incremental interactivity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof xPosition = Inputs.range([0, 600], {label: \"X position\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"yPosition = 25 * (1 + Math.cos(xPosition / 30))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"Here's the same diagram where the Y position is calculated from the formula:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"\n

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

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"

Some CSS:

\n\n ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"