43:["$","title",null,{"children":"Interactivity in Observable | Sagar Limbu | Observable"}] 4b:T4f3,md`## Comparing views to IPythonWidgets In Jupyter, [IPythonWidgets](https://ipywidgets.readthedocs.io/en/latest/examples/Using%20Interact.html#interactive) functionality like \`interact()\` and \`interactive()\` can be used to provide inputs which cause a Python function to be reexecuted when changed. In Observable, inputs modify variables which any other cells in the notebook are permitted to use. Cells that reference these variables will all change in sync with the input changing. IPythonWidgets allow other objects implementing the widget protocols to be linked on the JavaScript side, skipping the kernel, so the distinction between \`jslink\` and a \`trailets\` \`link\` is important. This distinction does not exist in Observable, because all code is linked in JavaScript (and links are implicit based on the cells referenced in code, not objects created in code). IPythonWidgets often use callbacks to hook up mutable objects, while Observable uses the reactive pattern of recreating objects based on the new values. For some users this is a significant improvement: hooking up callbacks can be a jump in complexity even for experienced Python users, so it's convenient that users don't need to use them to create interactive widgets in Observable. `4c:T655,md`In review, for a Jupyter user to get comfortable with Observable it is helpful to: * know some JavaScript (here's a [list of differences](https://observablehq.com/d/5e82392bae5fb729)) * understand [differences from Jupyter](https://observablehq.com/d/5e82392bae5fb729), particularly [reactivity](https://observablehq.com/@observablehq/how-observable-runs) * be able to import data, use a visualization tool, share notebooks and embed visualizations ([the previous tutorial in this series](https://observablehq.com/d/eceaa744227c4fea)) And after this series of tutorials you're well on your way. Now it's time to explore some notebooks! Here are some collections of favorites. When you find one you like, try forking it and making some changes, maybe even swapping in your own data. * [Visualization](https://observablehq.com/collection/@observablehq/visualization) * [Explorables](https://observablehq.com/collection/@observablehq/explorables) * [Art](https://observablehq.com/collection/@observablehq/generative-art) * [Maps](https://observablehq.com/collection/@observablehq/maps) Or if you'd rather keep reading, here are a some next steps: * [Visualization with Vega Lite](https://observablehq.com/d/3c458cfcac4dbda8?collection=@observablehq/observable-for-charting) * [Getting Started with D3](https://observablehq.com/d/5a4c8ad2dcf5d2e1?collection=@d3/getting-started) * [Quick Start Tutorial](https://observablehq.com/collection/@observablehq/tutorial) * [Tutorials for all Observable features](https://observablehq.com/collection/@observablehq/introduction) Best of luck, and let us know what you create! `4d:[] 47:{"id":"8747ea2f333315ba","slug":"interactivity-in-observable_tutorial","title":"Interactivity in Observable","thumbnail":"5eb72f5d8e8e389ce1c1cc0eefe4caff603da992dba6474da81dd6ee08cf70c0","access_level":"public","create_time":"$D2022-09-21T17:29:32.491Z","update_time":"$D2022-09-21T17:29:32.491Z","view_time":null,"first_public_time":"$D2022-09-21T17:29:57.164Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3d6d0e61ccf3a479","login":"sagarlimbu","name":"Sagar Limbu","avatar_url":"https://avatars-next.observableusercontent.com/cc219e01998c665a55eec34dddd997cfeac79bb70130ceec892bf6a863e91892","tier":"starter_2024","bio":"","following":false},"version":714,"publish_version":714,"role":null,"authored":false,"authors":[{"type":"individual","id":"b87cdf596bee611d","login":"sagarlimbu","name":"Sagar Limbu","avatar_url":"https://avatars-next.observableusercontent.com/cc219e01998c665a55eec34dddd997cfeac79bb70130ceec892bf6a863e91892","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b87cdf596bee611d","login":"sagarlimbu","name":"Sagar Limbu","avatar_url":"https://avatars-next.observableusercontent.com/cc219e01998c665a55eec34dddd997cfeac79bb70130ceec892bf6a863e91892","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactivity in Observable","cells":[{"id":0,"value":"md`# Interactivity in Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`Interaction makes documents more approachable.\n\nNotebooks make arguments and explorations more reproducible by showing each step in code and encouraging the reader to run it themselves. Being able to watch changes to code propagate through an analysis or try the same analysis on different data makes notebooks powerful and engaging.\n\nBut viewing and modifying code isn't something all viewers are comfortable doing or something even the most technical viewers always have time for. Interactive inputs make the acts of plugging in different data and questioning model assumptions available to everyone. And of course it can be fun to watch charts and numbers change as you whip a slider back and forth!\n\nThis notebook goes through using interactive widgets in Observable notebooks as well as the basics of animations.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`## Views\n\nInteractive inputs in Observable, called views, are similar to [IPythonWidgets](https://ipywidgets.readthedocs.io/en/latest/) in Jupyter, but tend to be \n* simpler to write (because they don't need to deal with crossing the Python/JavaScript border),\n* quicker to respond to user changes (because they don't require server round-trips), and\n* more integrated with the notebook (because changing a value updates each of its references throughout a notebook, not just a single widget).\n\nAdding a slider, a clickable map, a text box, or other input to modify a value used throughout a notebook works the same way as normal cross-cell communication: reactively.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`Visualizations in Observable are often created in multiple steps across multiple cells. Changing the values on which a visualization depends causes it to rerender with the new value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"length = 100 // try changing this number and running the cell with shift-enter","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"height = 60 // or change this one, a cell can depend on lots of other cells","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md`The cell above and the two cells below update in response to new values of \\`greenLength\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"greenLength + \" pixels wide\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"greenLength % 2 === 0 ? \"A nice even length.\" : \"What an odd length!\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`You can write your own inputs like the html range input above, but the [inputs notebook](https://observablehq.com/@jashkenas/inputs) has all the inputs you're likely to want to get started.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"md`*The \\`slider\\` function takes optional parameters (via the JavaScript pattern of an \"options object\") to allow configuration of a slider, with defaults.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"viewof simple = slider()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"simple","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof money = slider({\n min: 0,\n max: 1e9,\n step: 1000,\n value: 3250000,\n format: \",\",\n description:\n \"Zero to one billion, in steps of one thousand, formatted as a (US) number\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"money","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"md`You can read more about the \\`slider\\` function by clicking on it in the import cell below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md`As a fancier example, here's the range slider we used in the previous tutorial:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"viewof range = rangeSlider({\n min: 0,\n max: 200,\n value: [50, 150],\n precision: 0, // how many decimal places\n title: 'Ranges of numbers between 0 and 200',\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"range","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"md`Inputs can created for very specific use cases: here's a world map that returns the lattitude and longitude of the point the user clicks.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"import {worldMapCoordinates} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`Click on the map below to change the value of the coordinates variable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"viewof coordinates = worldMapCoordinates([-122.27, 37.87])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"coordinates","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md`You can read more about [views](https://observablehq.com/@observablehq/introduction-to-views) and the [viewof keyword](https://observablehq.com/@observablehq/a-brief-introduction-to-viewof), but if you're familiar with IPythonWidgets there are a few differences it may be helpful to have pointed out first.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`Like IPythonWidgets, the state of a widget, such as which value is currently selected, is not part of the persisted notebook state. If other people are viewing the same notebook, changes to the slider value are not shared between viewers and are not saved. You may wish to set a default value in your input so the initial value is reasonable when viewers first load the notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`Even in a notebook you own, changes to the current value of a slider like this one are not saved.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"viewof x = slider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`## Animations\n\nPart of getting used to the lack of client/server roundtrips in Observable is using animations more frequently. The same way the value produced by a cell can be made interactive by using a view, a value produced by a cell can be changed without user input to drive animations.\n\nChanging the value of a cell can be driven by a generator, a JavaScript language feature very similar to generators in Python.\n\n~~~py\ndef counter_generator():\n i = 0;\n while True:\n yield i\n i += 1\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"counterGenerator = function*() {\n let i = 0;\n while (true) {\n yield i++;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"md`When we instantiate a generator by calling \\`counterGenerator\\`, we see the values pulled from the generator by the Observable runtime once per browser animation frame, which is 60 times per second in most situations.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"counterGenerator()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"md`There's also an Observable-specific generator literal syntax. Once you use \\`yield\\` in a code block, you're defining a cell to be a generator:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"i = {\n let i = 0;\n while (true) {\n yield i;\n i+= 3;\n if (i > 800) {\n i = 0;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"md`By referencing a value that changes (in this case, via a generator) a cell can be made to animate through the changing values.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"html`