28:null 29:["$","title",null,{"children":"Week 1 Tutorial 1: Notebooks and cells | vis4sense | Observable"}] 2e:[{"id":"35d51c69c4717a423ac2d5e9f0ea14cda356d72b7146c4c00ee8e61274bc0cb3de9b54bb8b30bd92d1898fda735e7d3cf9da46b1cf8e18a1e2c579b7368c3943","href":"https://static.observableusercontent.com/files/35d51c69c4717a423ac2d5e9f0ea14cda356d72b7146c4c00ee8e61274bc0cb3de9b54bb8b30bd92d1898fda735e7d3cf9da46b1cf8e18a1e2c579b7368c3943","name":"addCell@1.mov","type":"video/quicktime","lastModified":1696976142021.387,"size":1073363},{"id":"20a2176f297bfbdbed6e5f1fb7a9e97d404e5c1750b490249964ba45e986db0694cb994a48dc3d42530539c63e9825ddcec77e45b755b5bb54267dc839a00425","href":"https://static.observableusercontent.com/files/20a2176f297bfbdbed6e5f1fb7a9e97d404e5c1750b490249964ba45e986db0694cb994a48dc3d42530539c63e9825ddcec77e45b755b5bb54267dc839a00425","name":"delete.mov","type":"video/quicktime","lastModified":1696976142021.387,"size":1234233},{"id":"bcad2280c3aa7a76035aeaf558aeb3b2bc2c1c129e3af2114bfc0deac0f17e319617c1225954f65a9cdc6fb1e647e989ba52e80a1c5b394954d40cf8481ca7d8","href":"https://static.observableusercontent.com/files/bcad2280c3aa7a76035aeaf558aeb3b2bc2c1c129e3af2114bfc0deac0f17e319617c1225954f65a9cdc6fb1e647e989ba52e80a1c5b394954d40cf8481ca7d8","name":"drag2.mov","type":"video/quicktime","lastModified":1696976142021.387,"size":5065858},{"id":"ab506f7ad026b7b11328b5ce0d33ec1aad0b294a1988fefce272f46f5e42d924b931d444478f843abe0c547abf6401931d91c797ab598b44b8be8325332f134a","href":"https://static.observableusercontent.com/files/ab506f7ad026b7b11328b5ce0d33ec1aad0b294a1988fefce272f46f5e42d924b931d444478f843abe0c547abf6401931d91c797ab598b44b8be8325332f134a","name":"dragMultiple.mov","type":"video/quicktime","lastModified":1696976142021.387,"size":3735017},{"id":"57c6030b464bbb087987fbd783e153cd10d1c653ca97c98d25196eb93c6ccf4f2c9f800cd1db1d70c4fe1719379cfdd0ccc3633dedecc2f0f4c6c67e5ff4aac5","href":"https://static.observableusercontent.com/files/57c6030b464bbb087987fbd783e153cd10d1c653ca97c98d25196eb93c6ccf4f2c9f800cd1db1d70c4fe1719379cfdd0ccc3633dedecc2f0f4c6c67e5ff4aac5","name":"new.mov","type":"video/quicktime","lastModified":1696976142021.387,"size":9436571},{"id":"1a3d24034a37279f173e35ef6d91e35abbeab9d46b8d8d48c5b33b4fab2044474984f305d3ba92615893801771f299fd17aec05b4aee41807856d49a60c87eb3","href":"https://static.observableusercontent.com/files/1a3d24034a37279f173e35ef6d91e35abbeab9d46b8d8d48c5b33b4fab2044474984f305d3ba92615893801771f299fd17aec05b4aee41807856d49a60c87eb3","name":"observable-change-cell-type.png","type":"image/png","lastModified":1770395669149.167,"size":41166}] 2c:{"id":"456a3e4f4dabf365","slug":null,"title":"Week 1 Tutorial 1: Notebooks and cells","thumbnail":"2bfd01742484ffed70ecb1f9f03fcbc011f7a85b9006b5d7249aa908155b7e8f","access_level":"public","create_time":"$D2023-10-10T22:15:42.021Z","update_time":"$D2026-03-02T11:21:52.413Z","view_time":null,"first_public_time":"$D2024-11-05T21:48:36.180Z","has_unpublished_edits":null,"fork":{"id":"b64494e58131b26a","slug":"learning-observable-notebooks-and-cells","title":"Learning Observable: Notebooks and cells","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ee33646169618d88","login":"vis4sense","name":"vis4sense","avatar_url":"https://avatars-next.observableusercontent.com/e9cf9f5cce9434795306b6057c7f1c94da01c8572f91bc9371b41f956b0d1be5","tier":"education_2026"},"version":383,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ea89374c7616fbb2","login":"viskai","name":"Kai Xu","avatar_url":"https://avatars-next.observableusercontent.com/f4fdffee0c29ae69192e0c36f3a10b3c92dc6714fd89b5464ceb9ec5e4289f47","tier":null}],"members":[{"type":"individual","id":"ea89374c7616fbb2","login":"viskai","name":"Kai Xu","avatar_url":"https://avatars-next.observableusercontent.com/f4fdffee0c29ae69192e0c36f3a10b3c92dc6714fd89b5464ceb9ec5e4289f47","tier":null,"role":"editor"},{"type":"team","id":"ee33646169618d88","login":"vis4sense","name":"vis4sense","avatar_url":"https://avatars-next.observableusercontent.com/e9cf9f5cce9434795306b6057c7f1c94da01c8572f91bc9371b41f956b0d1be5","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"45864fcd91db4694","slug":"observable-tutorials","title":"Observable tutorials","owner":{"id":"ee33646169618d88","login":"vis4sense","name":"vis4sense"}},"type":"notebook","body":{"titling":"auto","title":"Week 1 Tutorial 1: Notebooks and cells","cells":[{"id":0,"value":"# Week 1 Tutorial 1: Notebooks and cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"What you're looking at here is called a _notebook_, and it consists of _cells_. \n- A cell can contain text, like this one.\n- A cell can also contain code, like the next one:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"1 + 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"* The content of the cell is the code, in this case the simple calculation `1+2`, and the result is shown above the code.\n* After typing into a cell, whether it's code or text, you need to run the cell to see the result. You do that by clicking the play button in the top right corner of the cell, or by pressing shift-enter/return.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"Cells can contain computations of any complexity, and they can produce much more than just numbers. Here's a chart (we'll get to the details later):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"Plot.plot({\n marks: [\n Plot.dot(cars, {x: \"power (hp)\", y: \"economy (mpg)\"})\n ],\n ariaLabel: \"Relationship between miles per gallon and horse power\",\n ariaDescription: \"Scatterplot of the relationship between miles per gallon (mpg) and horse power (hp) for 406 cars. We see that as horse power increases, miles per gallon decreases.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"A cell can also contain interactive elements such as sliders, radio buttons, dropdown boxes to select an item, and more.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"viewof amount = Inputs.range([0, 100], {label: \"Amount\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"Move the slider above, and you will see its value change. Let me guess, is it ${amount}?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"## Cell types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"**Text cells** are written in plain text with markup for styling. You can have _italics_ or **bold text**, [hyperlinks](https://observablehq.com/), etc. The markup language we use is called [_Markdown_](https://observablehq.com/@observablehq/markdown-quick-reference).\n\nMarkdown cells can also include code. To get the `amount` variable to show up in text, you type `\\${amount}` as shown here:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"The amount is ${amount}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"You can use the values of named cells in calculations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"yearly = 12 * amount","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"## Reactive code execution\n\nWhile dragging the slider to change the value, you may have noticed that all other values in the notebook updated automatically without you having to re-run any code in individual cells. \n\nObservable uses a _reactive_ model of code execution. What that means is that it knows how different cells depend on one another in a notebook. When any cell is updated, all cells that depend on it are automatically re-run. This works with any number of cells, and their order on the page doesn't matter.\n\nThe calculation below depends on the two other controls that come after it. It does not matter whether they're defined before (like `amount`) or after the calculation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"total = amount * (years ** (1 + interest/100))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"viewof years = Inputs.select([\"10\", \"15\", \"20\", \"30\"], {label: \"Years\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"viewof interest = Inputs.radio([\"1\", \"2\", \"3\", \"5\", \"7.5\", \"12\"], {label: \"Interest rate (%)\", value: \"3\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"## Creating and deleting cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"- To create a new cell, hover over the left edge of the existing cells to reveal **+** buttons above and below.\n- Clicking any of them will open the [_Add Cell_ menu](https://observablehq.com/@observablehq/adding-cells).\n- You can select from the three main types (JavaScript, Markdown, and HTML) and a range of templates for charts, inputs, tables, and more.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"- To delete a cell, click the three-dot menu in its left sidebar and select _Delete_.\n- You can also click into the cell and then select the trash can button from the toolbar on the bottom of your browser window.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":193,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"## Pinning and moving cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"- The little push pin icon you see next to an open cell allows you to _pin_ a cell, which means keeping it open.\n- JavaScript cells are pinned by default, while Markdown and HTML cells are unpinned when you create them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"- You can move cells by clicking and holding the mouse over the bar on the left of the cell (the pointer will turn into a hand icon).\n- As an alternative, the toolbar on the bottom of the browser lets you move a cell up or down by clicking the arrow buttons.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"- To move multiple cells, click Select in the cell menu (three dot menu).\n- This shows checkboxes for each cell, which lets you pick which ones to include.\n- You can bulk move all selected cells at once using arrow buttons in the tool bar, or delete/duplicate them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"## Changing cell type\n\nYou can change the cell type after creating it by clicking the icon to the left of the cell code (not the result cell).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":362,"value":"observableChangeCellType = FileAttachment(\"observable-change-cell-type.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"## Create a notebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"To create a new notebook, scroll to the top of any page on Observable and you will find a _New_ button in the top right. Clicking it presents you with a choice to create a blank notebook or to start from a number of templates, such as charts, data access to a number of services, curated datasets to explore, and more.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"You can share notebooks with others to edit together, or keep them to yourself.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1"}} 2d:"$2c:body"