2c:null 2d:["$","title",null,{"children":"The Magic of Observable Notebooks ✨ | Amber Hoak | Observable"}] 32:[{"id":"0dd8cddd267899e6ac29f2b77b912993a8bd3ea77d650fa4f59f4429eed30b358b709b3623faa39ccaaa46555197498cea50215a1752bea7d704ff9c5875f499","href":"https://static.observableusercontent.com/files/0dd8cddd267899e6ac29f2b77b912993a8bd3ea77d650fa4f59f4429eed30b358b709b3623faa39ccaaa46555197498cea50215a1752bea7d704ff9c5875f499","name":"sample@1.csv","type":"text/csv","lastModified":1581624811561.847,"size":302},{"id":"c5d545ae1ffbfaa5065da15bd30359f5a581fc9c2249eee2dda48495a3becfe6b5cf030b1be17123049aa0d10020dc69531eb6a81bdc51b482e7bc86cff69582","href":"https://static.observableusercontent.com/files/c5d545ae1ffbfaa5065da15bd30359f5a581fc9c2249eee2dda48495a3becfe6b5cf030b1be17123049aa0d10020dc69531eb6a81bdc51b482e7bc86cff69582","name":"animals-surprised-cute-kitty-cat@1.jpg","type":"image/jpeg","lastModified":1581628365471.599,"size":318706}] 30:{"id":"5f4c44c0f0d9bd34","slug":"the-magic-of-observable-notebooks","title":"The Magic of Observable Notebooks ✨","thumbnail":"aff386b318a34177dfdf9564922c634476a6e216db05c6199137dbec8ddf50ee","access_level":"public","create_time":"$D2020-02-13T18:09:02.959Z","update_time":"$D2020-02-14T03:07:02.370Z","view_time":null,"first_public_time":"$D2020-02-13T21:38:22.419Z","has_unpublished_edits":null,"fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"11b00269dbb427c5","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":"starter_2024"},"version":541,"publish_version":541,"role":null,"authored":false,"authors":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null}],"members":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The Magic of Observable Notebooks ✨","cells":[{"id":0,"value":"md`# The Magic of Observable Notebooks ✨`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"md`

Why are Observable Notebooks useful?

Data Exploration: import data from multiple sources
Live Coding: instant feedback
Collaboration: Multi-editor, fork notebooks
Communication of insights
Prototype and Design

How does it work?

Cells (like formulas) run automatically whenever their referenced values change
Order of cells doesn't matter: \"Topological order\"

Lets play with some examples

Working with cells

Working with Methods

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"MethodResult = \n{\n // const definedBelow = 12 // if we uncomment this it will take local variable\n // this is a method and has single return\n const result = myFirstConstant + definedBelow\n let counter = 1\n for (let i = 0; i < result; i++) {\n counter += i * 2\n }\n return counter \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`We can also create html elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"element = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"element.onclick = function(){clickFunction()};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"mutable click = false // try taking out \"mutable\" prefix ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"function clickFunction () {\n mutable click = !click\n return click\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`*More about mutable state [here](https://observablehq.com/@observablehq/introduction-to-mutable-state?collection=@observablehq/introduction)*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`

Getting Data

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`We can also use Promises and load data async`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"status = new Promise(resolve => {\n setTimeout(() => {\n resolve({resolved: new Date});\n }, 2000);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"raw = (await fetch(\"https://raw.githubusercontent.com/ahoak/data-vis-sandbox/master/raw.json\")).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"md`We can open a file via file attachment for relatively small data (files < 15MB)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"image = FileAttachment(\"animals-surprised-cute-kitty-cat@1.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"text = FileAttachment(\"sample@1.csv\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"d3.csvParse(text, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`We can use data visualization to explore our data. See this [notebook](https://observablehq.com/@ahoak/bar-chart)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`Other options to help you access data include: [connecting to a Database](https://observablehq.com/@observablehq/connecting-to-databases), [accessing secrets](https://observablehq.com/@observablehq/secrets) and [API keys](https://observablehq.com/@observablehq/api-keys) through the settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"md`

Imports

Collaboration

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`**Forks** allow you to modify an existing users notebook.
You can **comment** on notebook and use a team notebook to do \"pull requests\" and edit simultaneously on a notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"md`

Lower barrier to entry on coding
Easy to teach concepts through live coding
Clean
Interactive
Easy to modify and share content
Sharing between notebooks via imports

Support issues with chromium based browsers
Issues running large notebooks and datasets
Vague debugging errors
DOM selection methods can get weird