31:[{"id":"2c2bfc614924a4981150686ab2c29769790249539e23b4a9cef45fdde8f0f2c292493c72a53de68906f4bf7cfc636e44cbc1d5a5ac945170533121ffc4190c31","href":"https://static.observableusercontent.com/files/2c2bfc614924a4981150686ab2c29769790249539e23b4a9cef45fdde8f0f2c292493c72a53de68906f4bf7cfc636e44cbc1d5a5ac945170533121ffc4190c31","name":"minimap-icon.png","type":"image/png","lastModified":1664311977120.393,"size":605},{"id":"ed499bdaaf793c76d2a5f238019fe8743ca30ffe6219bb7b3f1276cc6190c6a12546e962505f71d98ee6212ef5b17102524733bbb87721a1cd25a59463ba34f6","href":"https://static.observableusercontent.com/files/ed499bdaaf793c76d2a5f238019fe8743ca30ffe6219bb7b3f1276cc6190c6a12546e962505f71d98ee6212ef5b17102524733bbb87721a1cd25a59463ba34f6","name":"minimap3.mov","type":"video/quicktime","lastModified":1671161370499.537,"size":1946029},{"id":"a0312ab0041d2b372074c33e33245c65193344f829651bf4b154a2ffdb6a4cdc36ad42e7bca10f11cc2a96f144914ab64b815f25ee39900be796abc1746d15ce","href":"https://static.observableusercontent.com/files/a0312ab0041d2b372074c33e33245c65193344f829651bf4b154a2ffdb6a4cdc36ad42e7bca10f11cc2a96f144914ab64b815f25ee39900be796abc1746d15ce","name":"minimap.mov","type":"video/quicktime","lastModified":1671160953651.486,"size":2766053},{"id":"528ac750141e3c010df0316b91981b6011da227673b2b6fcf0ed75d6520c55729137b0105f8f36a1d4151fce8b0d65c99c2af634bbc5bf88dec56c6a771ada83","href":"https://static.observableusercontent.com/files/528ac750141e3c010df0316b91981b6011da227673b2b6fcf0ed75d6520c55729137b0105f8f36a1d4151fce8b0d65c99c2af634bbc5bf88dec56c6a771ada83","name":"minimap2.mov","type":"video/quicktime","lastModified":1671160843134.316,"size":1597136},{"id":"acbc5a6fa71fd5c1239b1c9bd00beabb80258f68ab01960cdf3abd585b4d284d9ad624fdd498a5db02b5076dfcad92aa6b9e32652026860541d9b1a2ffd3769f","href":"https://static.observableusercontent.com/files/acbc5a6fa71fd5c1239b1c9bd00beabb80258f68ab01960cdf3abd585b4d284d9ad624fdd498a5db02b5076dfcad92aa6b9e32652026860541d9b1a2ffd3769f","name":"new-users-course-minimap.png","type":"image/png","lastModified":1671033085804.922,"size":476441},{"id":"9979a641c5c1d10e2a539e490c83e51c80cce67477de6f1863f67cdaef11916aa7f221907b6d69fb1a8cc943c6f4faa62825f87b3e342142634d28f382fcd731","href":"https://static.observableusercontent.com/files/9979a641c5c1d10e2a539e490c83e51c80cce67477de6f1863f67cdaef11916aa7f221907b6d69fb1a8cc943c6f4faa62825f87b3e342142634d28f382fcd731","name":"new-users-course-sm-minimap.png","type":"image/png","lastModified":1671161834214.407,"size":225496}] 2f:{"title":"Learning Observable: Reactive dataflow","cells":[{"id":0,"value":"# Learning Observable: Reactive dataflow","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":122,"value":"We previously introduced Observable's [reactive model](https://observablehq.com/d/b64494e58131b26a?collection=@observablehq/intro-to-observable#cell-51) for cell execution. Here, we'll dig a bit deeper into how it works, features to help you understand and update your notebooks' organization, and advantages of the reactive dataflow.","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"Observable is different from vanilla JavaScript because it organizes code and data into _cells_ that it re-runs automatically as needed. You can think of this as working like a spreadsheet, where you can write calculations and enter values. \n\nObservable knows which cells depend on which others, no matter where they are located in the notebook. So when one of them changes, all values that depend on it are automatically updated. This is also efficient: only those cells that are affected by a change are re-run. That means that you can organize cells in your notebook however you want, without worrying about how the order of operations may be affected. \n","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"The `value` cell below is used in two other cells, one before and one after it in the notebook. Whenever you change its value by moving the slider, both dependent cells will update.","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"squared = value * value","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof value = Inputs.range([0, 100], {label: \"Value\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"doubled = value * 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"Learn more about [How Observable Runs](https://observablehq.com/@observablehq/how-observable-runs). ","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"## The Minimap\n\nWe can see how this works by looking at the [_Minimap_](https://observablehq.com/@observablehq/minimap?collection=@observablehq/visualizing-debugging-notebooks). Open it by clicking the Minimap button ${await FileAttachment(\"minimap-icon.png\").image({width: 19})} in the sidebar on the right and then click the cell named `value` inside it (or click within the cell in the document).\n","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":96,"value":"The `value` cell is now highlighted, and lines link to cells that depend on it. This reads left to right: the cell we selected has a dot toward the left, and cells that depend on it have a dot toward the right.\n\nLet's add more cells to see what this might look like.","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"doublesquared = doubled * squared","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"doublesquaredplus = doublesquared + value","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":46,"value":"In this somewhat contrived example, `doublesquaredplus` depends on the `doublesquared` and `value` cells, with `doublequared` depending on `double` and `squared`. The Minimap shows us one level up and down from `doublesquared` when we click on it, and indicates that there are more dependencies upstream of `doubled` and `squared`. We can follow them by clicking on those cells.","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"The Minimap also provides another way of reordering cells in a notebook. You can click on a cell in the Minimap, then drag it up or down to move it to a new position in your notebook. This is helpful when you want to move cells over a longer distance, for example to move them into an appendix.","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":65,"value":"## Advantages of reactive code\n\nReactive code might seem unusual at first, and it is best understood by just trying it out. Once you're used to this way of working, you will likely miss it in other environments. Not having to worry about the order in which values are defined, and not having to re-run computations when things change, eliminates many sources of bugs and lets you build much more readable and better structured code.\n\nThe reactive model also gives you more control over how your code is organized and presented. In longer notebooks, it is common to move computations, data preparation, etc., into an appendix at the end of the notebook (or perhaps in an entirely separate notebook — see [importing](https://observablehq.com/d/3455fc643fe664d7?collection=@observablehq/intro-to-observable)) without having to call those data prep functions before creating the charts or running an analysis. ","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"## Next steps\n\nNext, let's look at how Observable's reactive data flow works with [user inputs and interactivity](https://observablehq.com/@observablehq/learning-observable-user-inputs-and-interactivity?collection=@observablehq/intro-to-observable).","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"newUsersCourseSmMinimap = FileAttachment(\"new-users-course-sm-minimap.png\").image({width: 200})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}