2c:null 2d:["$","title",null,{"children":"Intro to Observable | Jon E. Froehlich | Observable"}] 32:T445,# Intro to Observable _This tutorial is part of the [Intro to Vega-Lite Collection](https://observablehq.com/collection/@jonfroehlich/intro-to-vega-lite)_. Welcome to our Observable tutorial! 👋 Observable **notebooks** are a mixture of code and markdown organized by cells—similar to [Jupyter Notebooks](http://jupyter.org/). In Observable, cells can be code—typically JavaScript but also SQL—or text markup like html, LaTeX, or markdown. Unlike Jupyter Notebook, cells do not have to execute top-to-bottom and cells that are dependent on other cells will automatically update (if values change). Your notebook drafts are automatically saved and can be private (by default) or published (for the public). You can edit all notebooks—even this one—by clicking the three dots on the left of this cell and selecting `Edit`. But don't worry, unless you own or fork a notebook, only the notebook's owner can make permanent changes. This tutorial is based on the [references](#cell-19) listed at the bottom of this notebook—much of which derives from official Observable tutorials.33:T64d,## References ### Observable References * [A Five-Minute Introduction to Observable](https://observablehq.com/@observablehq/five-minute-introduction), Observable, 2017 * [A Taste of Observable](https://observablehq.com/@observablehq/a-taste-of-observable), Observable, 2020 * [Introduction to Code in Observable](https://observablehq.com/@observablehq/introduction-to-code), Observable, 2017 * [Introduction to HTML in Observable](https://observablehq.com/@observablehq/introduction-to-html), Observable, 2018 * [Intro to Observable](https://observablehq.com/@meghanwillis/intro-to-observable), Meghan Willis, 2021 * [Observable for Jupyter Users](https://observablehq.com/@observablehq/observable-for-jupyter-users), Thomas Ballinger, 2020 * [Observable's not JavaScript](https://observablehq.com/@observablehq/observables-not-javascript), Observable, 2019 * [Keyboard Shortcuts](https://observablehq.com/@observablehq/keyboard-shortcuts), Observable, 2018 * [Observable Tutorials](https://observablehq.com/tutorials), Observable #### Slightly More Complex Topics * [Generator Cells, Functions, and Objects](https://observablehq.com/@observablehq/generator-cells-functions-and-objects) for dynamic content ### JavaScript * [A Minimal Introduction to JavaScript and Observable](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable), Jeffrey Heer, 2019 * [Eloquent JavaScript, Third Edition](https://eloquentjavascript.net/), Marijn Haverbeke, 2018 * [JavaScript for Python Programmers](https://observablehq.com/@ballingt/javascript-for-python-programmers), Thomas Ballinger, 202034:[{"id":"15f354cd616d16e08097c261ed89acc94dcb3d1be81c74fdc2b3b31c9119da79c9bd9a6c6c25c15899ef6f706266beba9aea8567aa43ed75cac44f463eeabbf9","href":"https://static.observableusercontent.com/files/15f354cd616d16e08097c261ed89acc94dcb3d1be81c74fdc2b3b31c9119da79c9bd9a6c6c25c15899ef6f706266beba9aea8567aa43ed75cac44f463eeabbf9","name":"image@2.png","type":"image/png","lastModified":1650581088234.878,"size":367},{"id":"9fbc1243d572fb27e90f450ad51b5d582c13945154bd4d34e0905692c57f3a5c3449b5419e0e4aebb48dfcbf8507374dead2c72a4bd4c39a2804422adc254062","href":"https://static.observableusercontent.com/files/9fbc1243d572fb27e90f450ad51b5d582c13945154bd4d34e0905692c57f3a5c3449b5419e0e4aebb48dfcbf8507374dead2c72a4bd4c39a2804422adc254062","name":"image@7.png","type":"image/png","lastModified":1650642638854.242,"size":76591},{"id":"ef98bc83edd92cc11913f293ea16ac73bf6ea7251e16548ea6c5d6f47ec55b1cad3061c7fd5e4827466b96bf5dafc1df77b6bffc9e77d3db165e7b4e9e18c4be","href":"https://static.observableusercontent.com/files/ef98bc83edd92cc11913f293ea16ac73bf6ea7251e16548ea6c5d6f47ec55b1cad3061c7fd5e4827466b96bf5dafc1df77b6bffc9e77d3db165e7b4e9e18c4be","name":"image@5.png","type":"image/png","lastModified":1650641459662.25,"size":330},{"id":"986363d0d16af52eda03f4ff765f0619bbf6e263d850a0821693f15a97d970987401b5a18526ef34f6943827dfb555fc4140444ce8c685a8c57da08f03d82ec7","href":"https://static.observableusercontent.com/files/986363d0d16af52eda03f4ff765f0619bbf6e263d850a0821693f15a97d970987401b5a18526ef34f6943827dfb555fc4140444ce8c685a8c57da08f03d82ec7","name":"image@11.png","type":"image/png","lastModified":1650900181416.366,"size":83929},{"id":"c086e72a591ec5701f2184ec24eb90404f6944d953571f3bcbe9313f1e1c0090b1bb4e6bd2e117fbe0570875b1c95843ae6bd4332f2b988c5ac74bbd85ebae69","href":"https://static.observableusercontent.com/files/c086e72a591ec5701f2184ec24eb90404f6944d953571f3bcbe9313f1e1c0090b1bb4e6bd2e117fbe0570875b1c95843ae6bd4332f2b988c5ac74bbd85ebae69","name":"image@1.png","type":"image/png","lastModified":1650580959484.632,"size":354},{"id":"43422bb7988df7cf57b4f184c32232a7638a541210cac308dbd196a98fb5f4ac1822f5485768e4568c8cef03b0f2a12842c2af90a24e874f475650467ca44f93","href":"https://static.observableusercontent.com/files/43422bb7988df7cf57b4f184c32232a7638a541210cac308dbd196a98fb5f4ac1822f5485768e4568c8cef03b0f2a12842c2af90a24e874f475650467ca44f93","name":"image@3.png","type":"image/png","lastModified":1650635344317.616,"size":7659},{"id":"29cd2063634621383708be213402f350d4aa86c3349d57c912a930819f6ca62d3326782643087835a6d39e434fe85aaab22e5b4d800832d46b4302390a9b6bee","href":"https://static.observableusercontent.com/files/29cd2063634621383708be213402f350d4aa86c3349d57c912a930819f6ca62d3326782643087835a6d39e434fe85aaab22e5b4d800832d46b4302390a9b6bee","name":"image@9.png","type":"image/png","lastModified":1650642693950.419,"size":25503},{"id":"a9eba112be916aab2126d06c9cc86754667f20140e3787ec8e08d6d092a14a88ca870494267f641fff4724c07c31e28d916ec629c8d97ad658bf149f9a6462c5","href":"https://static.observableusercontent.com/files/a9eba112be916aab2126d06c9cc86754667f20140e3787ec8e08d6d092a14a88ca870494267f641fff4724c07c31e28d916ec629c8d97ad658bf149f9a6462c5","name":"image@10.png","type":"image/png","lastModified":1650899793590.64,"size":144032}] 30:{"id":"726f1b43a33cd8fe","slug":"observable-tutorial","title":"Intro to Observable","thumbnail":"38acb60bcb9436ed2950328e440386c76c1e6bef13dd23ce1e352138191522e4","access_level":"public","create_time":"$D2022-04-21T13:01:29.888Z","update_time":"$D2023-05-05T15:04:32.521Z","view_time":null,"first_public_time":"$D2022-04-25T02:17:43.116Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"23bd5c1a20dd0d05","login":"jonfroehlich","name":"Jon E. Froehlich","avatar_url":"https://avatars-next.observableusercontent.com/a9a25cd8142666a211dc8b6d053ca8b9775ffe4f7d4295bb3e353a14a8b5b0b4","tier":"starter_2024","bio":"UW CS Professor in HCI. Director of the Makeability Lab. Co-founder of Project Sidewalk."},"version":627,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c39291f080b90a4","login":"jonfroehlich","name":"Jon E. Froehlich","avatar_url":"https://avatars-next.observableusercontent.com/a9a25cd8142666a211dc8b6d053ca8b9775ffe4f7d4295bb3e353a14a8b5b0b4","tier":null,"bio":"UW CS Professor in HCI. Director of the Makeability Lab. Co-founder of Project Sidewalk."}],"members":[{"type":"individual","id":"2c39291f080b90a4","login":"jonfroehlich","name":"Jon E. Froehlich","avatar_url":"https://avatars-next.observableusercontent.com/a9a25cd8142666a211dc8b6d053ca8b9775ffe4f7d4295bb3e353a14a8b5b0b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":{"id":"3a3c0cf0f278638f","slug":"intro-to-vega-lite","title":"Intro to Vega-Lite","owner":{"id":"23bd5c1a20dd0d05","login":"jonfroehlich","name":"Jon E. Froehlich"}},"type":"notebook","body":{"titling":"auto","title":"Intro to Observable","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":568,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"## Writing Cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"### Editing a cell\nTo add and edit a cell, mouse over an existing cell and click the '+' icon below it. If you're already editing a cell, you can also hit `ctrl-enter` to create a new cell after the current one.\n\nIn the new cell, click to obtain focus and and select one of the editing language options:![image@3.png](${await FileAttachment(\"image@3.png\").url()}).\n\nNote that the default is JavaScript. You will likely mostly write in a mixture of JavaScript and Markdown—just as you'd write in a mixture of Python and Markdown in Jupyter Notebook.\n\nIf you're trying to write in markdown but you forgot to select the `Markdown` type in the cell menu, you'll get an error:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"If you're trying to write in markdown but you forgot to select the `Markdown` type in the cell menu, you'll get an error","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"To fix this, mouse over the left side of the cell, click on the `{ }` icon, and select `Markdown`:\n![image@9.png](${await FileAttachment(\"image@9.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"md`Alternatively, you can tell the Observable engine via the \\`md\\` command to indicate Markdown-formatted text. This is using Observable's [tagged template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"### Runnings cells\nTo run a cell, give it focus (click on it) and hit `shift-enter`. Alternatively, you can hover over a cell and click the the play button .\n\nThe gray cell is the raw \"code\" cell. The white cell above it is the cell's output.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"`The current time is ${new Date()} and a random number is ${Math.random()}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"### Hiding the underlying cell code\n\nThe raw code cells are shown in gray and can be hidden by clicking the blue pushpin symbol ![image@1.png](${await FileAttachment(\"image@1.png\").url()}) that shows up in the left margin when you mouseover a cell. When the pushpin turns gray ![image@5.png](${await FileAttachment(\"image@5.png\").url()}), the raw code cell will be hidden once the cell loses focus.\n\nTo unhide (or expand) hidden cell code, click the expand icon ![image@2.png](${await FileAttachment(\"image@2.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":435,"value":"### Adding images\nWhen you're editing a cell, you can easily insert an image by copying/pasting directly from your clipboard. Try it!\n\nAlternatively, you can click on the right sidebar (floating menu) in your notebook and use the Data pane to add and insert images.\n\n![image@7.png](${await FileAttachment(\"image@7.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":406,"value":"## Cells as Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"The true power of notebooks is in how they combine text with code. Let's take a look! If you're not familiar with JavaScript or need a refresher, please see Jeff Heer's [\"A Minimal Introduction to JavaScript\"](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable) and the JavaScript references in the [References section](https://observablehq.com/@jonfroehlich/observable-tutorial#cell-19) at the end of the notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"### Cells are separate scripts \n\nEach **cell** in a notebook is a separate script that runs independently. A syntax error in one cell won't prevent another cell from running. Similarly, local variables are only visible to the cell that defines them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"For example, I'll declare a `var` variable below but it can't be referenced in another cell.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"{ var testValue = \"Hello, I'm a local var\"; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"Now let's try to reference `testValue` in another cell—it won't work:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"`The value of testValue = ${testValue}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"### Naming and referencing cells\n\nHowever, you can *name* cells, which can then be referenced by others cells (even cells in other notebooks!). The referencing cells will even auto-update when the dependent cell updates. \n\nNote: named cells look like and function *almost* like JavaScript assignments but cells can be defined in any order. See [Named cells are declarations, not assignments](https://observablehq.com/@observablehq/observables-not-javascript#cell-194)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"myFavColor = \"blue\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"Now let's try to reference it in another cell:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"`My favorite color is ${myFavColor}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"Now, try going back to the `myFavColor` declaration and changing it to a different color. What happens? You should see the `My favorite color is ...` cell automatically update!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":611,"value":"You can also use Observable's [built-in interactive widgets](https://observablehq.com/@observablehq/inputs) (which Observable calls [Inputs](https://observablehq.com/@observablehq/inputs)) to create interactive cells that automatically update. Let's try it!","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":619,"value":"Your favorite color is ${yourFavColor}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":617,"value":"viewof yourFavColor = Inputs.color({label: \"Your favorite color\", value: \"#4682b4\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"But circular references are not allowed:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"c1 = c2 - 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"c2 = c1 + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"### Cells for expressions and blocks\nExecutable cells (_i.e.,_ cells that contain code) come in two primary forms: *expressions* and *blocks*. For example, we can perform basic arithmetic:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"2 + 2 // the result of an expression always shows above the cell","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"Math.pow(3, 4) // again, the answer shows above the cell","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"We can also perform **variable** definitions (as we showed above with `myFavColor`).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"myName = \"Jon\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"You can now reference `myName` in other cells (just as we did with `myFavColor`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"myName // \"Jon\" will show above","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"You can also have more complicated objects like Arrays or dictionaries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":326,"value":"cScale = [\"Middle C\", \"D\", \"E\", \"F\", \"G\", \"A\", \"B\", \"High C\"];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"For things like **key-value pairs**—what JavaScript calls [object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#object_literals), which are similar to dictionaries—you need to surround the brackets `{ }` with parantheses to disambiguate them from code **blocks**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"cScaleToFrequency = (\n {\"Middle C\" : 261.63, \n \"D\" : 293.66, \n \"E\" : 329.63,\n \"F\" : 349.23,\n \"G\" : 392.00,\n \"A\" : 440.00,\n \"B\" : 493.88,\n \"High C\" : 523.25\n }\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"So, what are code **blocks**? They are blocks of code are surrounded by curly braces `{` and `}` and are intended for more complex code such as loops:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"{\n let x = 1;\n for (let i = 2; i < 5; i++) {\n x *= i;\n }\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"You can also set a code block equal to a variable and reference it in other cells:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"sumOf2s = {\n let x = 0;\n for (let i = 0; i < 10; i++) {\n x += 2;\n }\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"`The result of sumOf2s is ${sumOf2s}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"Think of a cell as a function, except the function has no arguments. [Source](https://observablehq.com/@observablehq/observables-not-javascript#cell-269)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"### Functions let you share code between cells\nTo repeat operations or share code between cells, define a **function**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"function greet(name){\n return `Hello ${name}!`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"This `greet` function can now be called from other cells.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":303,"value":"greet(\"Alice\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"greet(myName);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"### Cells can auto-refresh if they reference reactive variables\nThere are special variables that are *reactive*—if you refer to a reactive variable, your cell will continuously update.\n\nFor example, the Observable standard library has a reactive variable called `now` whose value is the current time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"`The current time is ${new Date(now).toLocaleTimeString()}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"Read more on [reactivity here](https://observablehq.com/@observablehq/introduction-to-code#reactivity).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"### Debugging cells\nDebugging is inevitably a key part of coding. There are two primary mechanisms for debugging in Observable: [`console.log()`](https://developer.mozilla.org/en-US/docs/Web/API/console/log) statements and using the keyword [`debugger`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger), which will trigger the web browser's built-in JavaScript debugger.\n\nLet's start with `console.log()`. Open up your browser's developer tools. In Chrome, press `Cmd+Option+I` (on Mac) or `Control+Shift+I` (Windows, Linux, ChromeOS)—see [How to Open Chrome Dev Tools](https://developer.chrome.com/docs/devtools/open/). But all browsers, including Safari, Firefox, and Edge, have similar functionality.\n\nNow, click on the cell below and run it (either by clicking the 'play button' or pressing `Shift+Enter` on your keyboard).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":419,"value":"{\n for(let i=0; i<5; i++){\n // See: https://developer.mozilla.org/en-US/docs/Web/API/console/log\n console.log(i + \": \" + Date.now() + \" ms\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"And you should see something like this printed out in Console:\n![image@10.png](${await FileAttachment(\"image@10.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":526,"value":"Additionally, you can use the keyword [`debugger`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger), which will trigger the web browser's built-in JavaScript debugger, and you can step through your code. \n\nLet's try it with the same code as before but this time with the debugger line inserted. Note that to observe this behavior, you need to **remove** the `//` before the `debugger` statement. We've commented it out here because the debugger statement literally stops JavaScript code from executing and can interfere with the Observable notebook if we keep it in.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":534,"value":"{\n for(let i=0; i<5; i++){\n // Uncomment the following line to see what happens\n //debugger; // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger\n console.log(i + \": \" + Date.now() + \" ms\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"With the `debugger` line uncommented above, your browser should auto-open the executing code in the debugger, which will allow you to step through the code, examine variables, _etc._ Just make sure you remember to uncomment or delete the `debugger` line when you're done debugging.\n\n![image@11.png](${await FileAttachment(\"image@11.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":156,"value":"### Cells can have interactive widgets\nObservable has a special `viewof` operator which lets you define interactive values. A view is a cell with two faces: its user interface and its programmatic value. Try editing the input below. Notice how the referencing cell runs automatically.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"viewof interactiveEditBox = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"interactiveEditBox","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"Here's an example with an HTML slider.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"viewof sliderVal = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"And here's a cell, below, that references `sliderVal` and automatically updates:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"sliderVal","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"For more information about `viewof`, see [Introduction to Views](https://observablehq.com/@observablehq/introduction-to-views). See also: Observable's guide to [interactive inputs](https://observablehq.com/@observablehq/inputs).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":177,"value":"### Cells can generate DOMs\n\nCells can generate Document Object Models or DOMs, for short, including HTML, SVG, Canvas, WebGL, *etc.*. You can use the standard DOM API like *document*.createElement, or use the built-in *html* tagged template literal. See [source1](https://observablehq.com/@observablehq/five-minute-introduction#cell-54) and [source2](https://observablehq.com/@observablehq/introduction-to-html#cell-38).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"{\n const p = document.createElement(\"p\");\n p.appendChild(document.createTextNode(\"I am a \"));\n p.appendChild(document.createElement(\"i\")).appendChild(document.createTextNode(\"paragraph\"));\n p.appendChild(document.createTextNode(\" element, created using the W3C DOM API.\"));\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"But Observable also has a built in `html` template literal that let's you create DOM elements more easily.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"html`

I am a paragraph element, created using Observable's HTML tagged template literal!

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"Similarly, you can use the `md` template literal to use markdown, which then generates HTML (and the underlying DOM too!):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"md`I, too, am a *paragraph* element, created using Markdown in a JavaScript cell.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"### Cells can be imported from other notebooks\n\nYou can [import any named cell](/@observablehq/introduction-to-imports) from any notebook, with syntax similar to static ES imports. But Observable imports are lazy: if you don’t use it, it won’t run.`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"ramp(d3.interpolateBrBG)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"Here's another example that helps us pretty print an array of data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":589,"value":"import {printTable} from '@jonfroehlich/data-utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"Let's declare some dummy data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":592,"value":"exampleData = [\n {\"city\": \"Seattle\", \"month\": \"Apr\", \"precip\": 2.68},\n {\"city\": \"Seattle\", \"month\": \"Aug\", \"precip\": 0.87},\n {\"city\": \"Seattle\", \"month\": \"Dec\", \"precip\": 5.31},\n {\"city\": \"New York\", \"month\": \"Apr\", \"precip\": 3.94},\n {\"city\": \"New York\", \"month\": \"Aug\", \"precip\": 4.13},\n {\"city\": \"New York\", \"month\": \"Dec\", \"precip\": 3.58},\n {\"city\": \"Chicago\", \"month\": \"Apr\", \"precip\": 3.62},\n {\"city\": \"Chicago\", \"month\": \"Aug\", \"precip\": 3.98},\n {\"city\": \"Chicago\", \"month\": \"Dec\", \"precip\": 2.56},\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"We can pretty print this table using the function `printTable(exampleData)` imported from [\"@jonfroehlich/data-utilities\"](https://observablehq.com/@jonfroehlich/data-utilities#printTable):\n${printTable(exampleData, null, 360)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":572,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":565,"value":"import {toc} from \"@jonfroehlich/collapsible-toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"