31:[{"id":"bcad2280c3aa7a76035aeaf558aeb3b2bc2c1c129e3af2114bfc0deac0f17e319617c1225954f65a9cdc6fb1e647e989ba52e80a1c5b394954d40cf8481ca7d8","href":"https://static.observableusercontent.com/files/bcad2280c3aa7a76035aeaf558aeb3b2bc2c1c129e3af2114bfc0deac0f17e319617c1225954f65a9cdc6fb1e647e989ba52e80a1c5b394954d40cf8481ca7d8","name":"drag2.mov","type":"video/quicktime","lastModified":1673371054418.122,"size":5065858},{"id":"30d44fae9b3e267bfb4ef7a9586c22d1ce1c0f2ed0116c2d4f8fe63e6197eca93ec323bd63ce07592308453b03fc340d5a84297e8488c5843084fc8a82f5f9de","href":"https://static.observableusercontent.com/files/30d44fae9b3e267bfb4ef7a9586c22d1ce1c0f2ed0116c2d4f8fe63e6197eca93ec323bd63ce07592308453b03fc340d5a84297e8488c5843084fc8a82f5f9de","name":"new-users-course-notebooks.png","type":"image/png","lastModified":1670953026502.825,"size":704651},{"id":"20a2176f297bfbdbed6e5f1fb7a9e97d404e5c1750b490249964ba45e986db0694cb994a48dc3d42530539c63e9825ddcec77e45b755b5bb54267dc839a00425","href":"https://static.observableusercontent.com/files/20a2176f297bfbdbed6e5f1fb7a9e97d404e5c1750b490249964ba45e986db0694cb994a48dc3d42530539c63e9825ddcec77e45b755b5bb54267dc839a00425","name":"delete.mov","type":"video/quicktime","lastModified":1671148442664.208,"size":1234233},{"id":"35d51c69c4717a423ac2d5e9f0ea14cda356d72b7146c4c00ee8e61274bc0cb3de9b54bb8b30bd92d1898fda735e7d3cf9da46b1cf8e18a1e2c579b7368c3943","href":"https://static.observableusercontent.com/files/35d51c69c4717a423ac2d5e9f0ea14cda356d72b7146c4c00ee8e61274bc0cb3de9b54bb8b30bd92d1898fda735e7d3cf9da46b1cf8e18a1e2c579b7368c3943","name":"addCell@1.mov","type":"video/quicktime","lastModified":1671148354637.494,"size":1073363},{"id":"57c6030b464bbb087987fbd783e153cd10d1c653ca97c98d25196eb93c6ccf4f2c9f800cd1db1d70c4fe1719379cfdd0ccc3633dedecc2f0f4c6c67e5ff4aac5","href":"https://static.observableusercontent.com/files/57c6030b464bbb087987fbd783e153cd10d1c653ca97c98d25196eb93c6ccf4f2c9f800cd1db1d70c4fe1719379cfdd0ccc3633dedecc2f0f4c6c67e5ff4aac5","name":"new.mov","type":"video/quicktime","lastModified":1671152399775.025,"size":9436571},{"id":"ab506f7ad026b7b11328b5ce0d33ec1aad0b294a1988fefce272f46f5e42d924b931d444478f843abe0c547abf6401931d91c797ab598b44b8be8325332f134a","href":"https://static.observableusercontent.com/files/ab506f7ad026b7b11328b5ce0d33ec1aad0b294a1988fefce272f46f5e42d924b931d444478f843abe0c547abf6401931d91c797ab598b44b8be8325332f134a","name":"dragMultiple.mov","type":"video/quicktime","lastModified":1671151625511.116,"size":3735017},{"id":"c50ae4bfb9c03ddeb4f82865afc5eac67b02a12420710df70c8d67eac4c10b30df923221299ff7e38dc6550fa411ffdb8590123e47d4958a53369fb89f2c5f97","href":"https://static.observableusercontent.com/files/c50ae4bfb9c03ddeb4f82865afc5eac67b02a12420710df70c8d67eac4c10b30df923221299ff7e38dc6550fa411ffdb8590123e47d4958a53369fb89f2c5f97","name":"new-users-course-sm-notebooks.png","type":"image/png","lastModified":1671166573074.896,"size":274476}] 2f:{"title":"Learning Observable: Notebooks and cells","cells":[{"id":0,"value":"# Learning Observable: Notebooks and cells","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"What you're looking at here is called a _notebook_, and it consists of _cells_. A cell can contain text, like this one. You're seeing the nicely rendered output above the typewriter-style source code.","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"A cell can also contain code, like the next one:","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"1 + 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"The content of the cell is the code, in this case the simple calculation `1+2`, and on Observable the result is shown above the code.\n\nAfter 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/shift-return.","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"Cells can contain computations of any complexity, and they can produce much more than just numbers. Here's a chart (don't worry about the details, we'll get to Plot [later](https://observablehq.com/d/79f43da4b58ef64e?collection=@observablehq/intro-to-observable)):","pinned":false,"hidden":false,"mode":"md"},{"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":true,"hidden":false,"mode":"ojs"},{"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"},{"id":28,"value":"viewof amount = Inputs.range([0, 100], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":104,"value":"## Cell types","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"As you may have guessed, there's a little trick here. 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\nAnd to explain that previous bit of magic, markdown 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"},{"id":112,"value":"The amount is ${amount}","pinned":true,"hidden":false,"mode":"md"},{"id":45,"value":"This is not limited to text — you can use the values of named cells in calculations. Perhaps we want to multiply the amount by some other number and assign that to a new variable, named `yearly`.","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"yearly = 12 * amount","pinned":true,"hidden":false,"mode":"ojs"},{"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. If you're familiar with spreadsheets, that might not seem terribly surprising, but if you're more used to traditional programming, it probably is.\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 controls that come after it. For some variety, we're using a dropdown box and radio buttons here. The total amount of our simple compounding interest calculator changes when you change any of its parameters, whether they're defined before (like `amount`) or after the calculation.","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"total = amount * (years ** (1 + interest/100))","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"viewof years = Inputs.select([\"10\", \"15\", \"20\", \"30\"], {label: \"Years\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"viewof interest = Inputs.radio([\"1\", \"2\", \"3\", \"5\", \"7.5\", \"12\"], {label: \"Interest rate (%)\", value: \"3\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"## Creating and deleting cells","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"Now that you've seen what cells are, you want to create your own! To create a new cell, hover over the left edge of the existing cells to reveal **+** buttons above and below. Clicking any of them will open the [_Add Cell_ menu](https://observablehq.com/@observablehq/adding-cells). You can select from the three main types of cells (JavaScript, Markdown, and HTML) as well as a wide range of useful templates for charts, inputs, tables, and more.","pinned":false,"hidden":false,"mode":"md"},{"id":189,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":99,"value":"To delete a cell, click the three-dot menu in its left sidebar and select _Delete_. 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"},{"id":193,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":83,"value":"## Pinning and moving cells","pinned":false,"hidden":false,"mode":"md"},{"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. JavaScript cells are pinned by default, while Markdown and HTML cells are unpinned when you create them. You can change that for any cell by simply clicking the pin (for example, this Markdown cell is pinned). For JavaScript cells, we often want to show the code, which is why they are pinned by default. This isn't as important for text cells, but keeping them pinned can encourage others to edit or comment.","pinned":true,"hidden":false,"mode":"md"},{"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). Hold down the mouse or track pad button to drag the cell to a new position in the notebook. A horizontal line indicates where the cell will end up when you drop it. 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"},{"id":204,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":196,"value":"\nTo move multiple cells, click Select in the cell menu (three dot menu). This shows checkboxes for each cell, which lets you pick which ones to include. You can bulk move all selected cells at once using arrow buttons in the tool bar at the bottom of your browser window, delete them all using the trash can icon, or duplicate them using the duplicate button.","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"## Create a notebook","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":214,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":211,"value":"You can share notebooks with others to edit together, or keep them to yourself. Notebooks can connect to a variety of data sources including local files, spreadsheets, APIs and for Enterprise and Pro accounts, cloud files and databases.\n\nWe'll go into more details on notebooks later in this series, however.","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"## Next steps\n\nNow it's time to [load in some data](https://observablehq.com/@observablehq/learning-observable-getting-data-into-observable?collection=@observablehq/intro-to-observable)!","pinned":false,"hidden":false,"mode":"md"},{"id":220,"value":"newUsersCourseSmNotebooks = FileAttachment(\"new-users-course-sm-notebooks.png\").image({width: 200})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}