2d:null 2e:["$","title",null,{"children":"Session 1.2 - Introduction to Observable | Carlos Sandoval Olascoaga | Observable"}] 33:T73e,md`## Before You Publish When you create a new notebook in Observable, it’ll have a randomly-generated identifier in its URL, like this: https://beta.observablehq.com/d/f5a585b2acc8dcce Only you can edit and view your draft notebooks. Click Share Link in the notebook menu to allow anyone with the link to read your notebook. When editing, changes are saved automatically as soon as you apply them, say by clicking the play button , ${keys( "Shift-Enter" )} or focusing a different cell. If you open your notebook in another window, you’ll see your saved changes propagate immediately. This is particularly useful with safe mode. If there’s a connectivity problem when editing a draft, a message at the bottom of the window will indicate that you have unsaved changes.

Observable will try to reconnect and save your changes. If we’re able to save, the message will disappear. If not, don’t panic: your changes are stashed in local storage. We’ll try again to save them the next time you visit your notebook. However, take care: stashed changes in local storage are *not* saved if you make subsequent changes to your draft in another browser. We don’t want to overwrite your new changes.`34:T466,md`## After You Publish The first time you publish, a *slug* is derived from the title of your notebook. The slug can’t be changed (yet), so think carefully before you publish! The slug becomes part of the published URL, like this: https://beta.observablehq.com/@mbostock/how-saving-works You can continue to edit your notebook after publishing, and as before, these changes are automatically saved. In addition, the Publish button will turn blue in the header to draw your attention, and you’ll see a notice atop your notebook:

Although your changes are *saved* automatically, they are not republished automatically: you control when your changes go live. Click the Publish button when you’re ready, or click on the “View changes” link to review what you’ve changed. If you want to discard these changes, click Revert… in the notebook menu.`35:T697,md`## Other People’s Notebooks You can edit other people’s notebooks, as well as your own. You can even edit this notebook by clicking on the cell menu or the left margin. However, your edits to other people’s notebooks are *not* automatically saved! If you edit someone else’s notebook, you’ll see the unsaved changes message:

The Fork button in the header will also turn blue to draw your attention. Clicking the Fork button will save a copy of the notebook with your changes. You can fork your own notebooks as often as you like to save multiple variations. This design lets you treat other people’s notebooks as scratchpads for experimentation, or to tinker with their code to see what it does, while ensuring that everyone sees the author’s notebook exactly as it was published on reload. If you like the results of your experimentation, save your fork!`36:[] 31:{"id":"6fbd6858f7d9e086","slug":"session-1-2-introduction-to-observable","title":"Session 1.2 - Introduction to Observable","thumbnail":"475dcb46508b9aa4dadb6716c40745f27c4e2f8e7d539f202ee090e2394a639a","access_level":"public","create_time":"$D2024-01-22T02:27:56.571Z","update_time":"$D2024-01-22T02:28:54.912Z","view_time":null,"first_public_time":"$D2024-01-22T02:27:56.571Z","has_unpublished_edits":null,"fork":{"id":"f4e05a25c16b2634","slug":"4-182-week-0-introduction-to-observable","title":"Week 0 - Introduction to Observable","owner":{"id":"7be24cbfb3203dab","login":"cesandoval","name":"Carlos Sandoval Olascoaga"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7be24cbfb3203dab","login":"cesandoval","name":"Carlos Sandoval Olascoaga","avatar_url":"https://avatars-next.observableusercontent.com/932dec7ee5c2e52477e2a80482b05fdab063507b7c3029a5f6bc1ff0e03bbc36","tier":"starter_2024"},"version":455,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7750258d506a87a9","login":"cesandoval","name":"Carlos Sandoval Olascoaga","avatar_url":"https://avatars-next.observableusercontent.com/932dec7ee5c2e52477e2a80482b05fdab063507b7c3029a5f6bc1ff0e03bbc36","tier":null}],"members":[{"type":"individual","id":"7750258d506a87a9","login":"cesandoval","name":"Carlos Sandoval Olascoaga","avatar_url":"https://avatars-next.observableusercontent.com/932dec7ee5c2e52477e2a80482b05fdab063507b7c3029a5f6bc1ff0e03bbc36","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d895c4b27c4da933","slug":"inam5983-design-urban-tech-and-community-participation","title":"INAM5983: Design, Urban Tech and Community Participation","owner":{"id":"7be24cbfb3203dab","login":"cesandoval","name":"Carlos Sandoval Olascoaga"}},"type":"notebook","body":{"title":"Session 1.2 - Introduction to Observable","cells":[{"id":246,"value":"md`# Session 1.2 - Introduction to Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`## Introduction to Notebooks\n\nThis is a *notebook*—an interactive, editable document defined by code. It’s a computer program, but one that’s designed to be easier to read and write by humans.\n\nA notebook can be used as a scratchpad for exploring data, or to explain quantitative phenomena. Because the code runs live in your browser, notebooks are also a powerful medium for studying dynamic systems and algorithms. (See Stephen Wolfram’s [What Is a Computational Essay?](http://blog.stephenwolfram.com/2017/11/what-is-a-computational-essay/) for more.)\n\nNotebooks are comprised of cells. A *cell* can be pretty much anything. For example, a cell might contain a few paragraphs of text, like this one. Or a cell might contain images, videos, charts, or other graphical and interactive elements. A cell can also contain data structures, like numbers, strings, arrays and objects. Functions, too.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"image = flood // See the import down below! 🌈","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"height = 500 // Try changing this value and clicking the play button ▶︎.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"md`Each cell, even a simple text cell like this one, is defined by a snippet of code. By default the code is hidden, but the next cell is *pinned* so you can see it. The code has a light gray background, and the cell’s content—the result of running the code—follows.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"`My favorite number is ${2 * 3 * 10}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"md`All code is editable, so try editing the code above! After making changes, click the play button (\\`▶︎\\`) in the bottom-right corner of the editor to run the new code, or use the ${keys(\"Shift-Enter\")} keyboard shortcut.\n\nIf this were your notebook, your edits would be saved automatically. But when you edit someone else’s notebook, your changes are discarded when you leave; reload the page to discard your changes immediately. If you wish to save your changes, click the fork button at the top to create your own personal copy of this notebook. (A fork button also appears in the bottom-right corner of the screen whenever you edit a published notebook.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`If a cell is not pinned, its source is only visible when focused. Click on the caret in the left margin to edit the cell. (On small screens, such as phones, first click the edit button in the bottom-right corner to show the left margin, and then click on the asterisk of the cell you wish to edit.)\n\nTo edit a different cell, either click on that cell’s left margin as before, or use ${keys(mac ? \"Alt-Tab\" : \"Alt-Shift-Down\")} and ${keys(mac ? \"Shift-Alt-Tab\" : \"Alt-Shift-Up\")} to navigate between cells.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`To create a cell, click on the inserter button (\\`+\\`) in the left margin between cells. To delete a cell, Shift-click the inserter button to merge it into the adjacent cell. Or use the equivalent keyboard shortcuts: ${keys(\"Alt-Enter\")} and ${keys(\"Alt-Backspace\")}.\n\nYou can move cells using ${keys(\"Alt-Cmd-Up\")} and ${keys(\"Alt-Cmd-Down\")}. (In the near future, you’ll be able to reorder cells by dragging and dropping.) If you can’t remember these commands, click on your avatar in the top-right corner of the screen, then click on “Help” for the full list.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"import {canvas as flood} with {height} from \"@mbostock/randomized-flood-fill\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`\n------\n## How Saving Works\n\nHere’s a quick explanation of how Observable saves your work.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`## Other Errors\n\n

\n\nIn rare cases, such as if you clear your cookies while you have Observable open, you might also see an error at the top of the page. If this happens, you must reload the page; any applied changes stashed in local storage will be saved on reload.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"function keys(keyset) {\n return mac\n ? `${keyWords(keyset)} ${keySymbols(keyset)}`\n : keyWords(keyset);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"import {mac, keySymbols, keyWords} from \"@mbostock/keys\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md`## Introduction to Code\nObservable notebooks are written in [JavaScript](https://developer.mozilla.org/docs/Web/JavaScript), the web’s native language. Try tinkering with the code to get a feel for how it works. Even the most wizened developer may yet learn by trial and error.\n\nCells come in two primary forms: *expressions* and *blocks*. Expression cells are the most concise and are intended for simple definitions, such as basic arithmetic:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"2 * 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`Blocks are surrounded by curly braces, \\`{\\` and \\`}\\`, and are intended for more complex definitions, such as ones involving local variables or loops:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"{\n let x = 0;\n for (let i = 1; i <= 100; ++i) {\n x += i;\n }\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`Local variables, like the *x* above, can’t be referenced from other cells; trying to reference an unknown variable will throw a runtime error. However, this error is localized to the broken cell, allowing the rest of the notebook to run happily.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"x + 2 // x is not accessible here!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"// go get lunch after!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"md`If you want to define a cell as an [object literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals), you must wrap the literal in parenthesis to disambiguate it from a block:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"({top: 20, right: 20, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`To share code between cells without copying and pasting, define a function:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"function greet(name) {\n return `Hello, ${name}!`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md`This *greet* function can now be called from other cells to display cheery greetings:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"greet(\"Carlos\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"greet(\"Sarah\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"greet(\"Class\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`While local variables are not visible across cell boundaries, you can name cells to reference their values. Here’s a cell named *color*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"color = \"yellow\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"color","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md`(This looks identical to a standard JavaScript assignment, but it’s not—it’s reactive! More on that in a bit.) Here’s another cell named *letters*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"letters = { return \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\") }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"md`You can refer to *letters* (or any other named cell) from other cells:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"letters.map(l => l.toLowerCase())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"md`You do not need to define named cells before you reference them: order your cells however you like, and Observable will automatically execute them in topological order. Out-of-order execution is especially helpful for improving the narrative flow of your notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"fullName = `${firstName} ${lastName}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"lastName = \"Lovelace\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"firstName = \"Ada\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"md`A cell that references other cells is re-evaluated automatically whenever the referenced values change. Try editing the *firstName* or *lastName* cell above, then click the play button (\\`▶︎\\`) to commit your change; *fullName* updates automatically.\n\nThis *reactivity* is similar to live reload, with an important difference: when a value changes, *only* referencing cells are re-evaluated, rather than the entire notebook. This makes editing more responsive—notebooks update rapidly in response to changes—and you don’t lose independent transient state.\n\nFor example, the cell below computes a random walk. If you edit the *stroke* cell, the random walk will change color, but the shape of the line remains the same. A new walk is only computed if you edit the *randomWalk* cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"randomWalk = {\n let y = 16, values = [y];\n for (let x = 0; x < width; ++x) values.push(y = y + (Math.random() - 0.5) * 3 + (16 - y) * 0.1);\n return values;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"{\n const context = DOM.context2d(width, 33);\n context.beginPath();\n context.moveTo(0, randomWalk[0]);\n for (let x = 0; x < width; ++x) \n context.lineTo(x, randomWalk[x]);\n context.lineJoin = context.lineCap = \"round\";\n context.strokeStyle = stroke;\n context.stroke();\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"stroke = \"red\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"md`To understand reactivity, think of each cell as a function. For example, the cell \\`sum = a + b\\` becomes a function that takes *a* and *b* as arguments, returning their sum; the runtime waits for the value of *a* and *b* to resolve and then invokes the *sum* function. The runtime invokes *sum* again whenever *a* or *b* change.\n\nIf a cell contains a \\`yield\\` statement, the runtime creates a generator function instead of a normal function. Likewise if the definition uses \\`await\\`, the runtime creates an async function. Reactivity greatly simplifies how you build user interfaces, script animations, and consume realtime data. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"