3e:null 3f:["$","title",null,{"children":"Observable Introduction Workshop | Peter Varholak | Observable"}] 45:T790,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. (In the near future, we’ll have real-time collaborative editing for team notebooks.) 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.`46: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.`47: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!`48:[] 43:{"id":"caab2ac0a1c199cc","slug":"observable-introduction-workshop","title":"Observable Introduction Workshop","thumbnail":"ad6daa8fa398e78c5d61fce7ebaced51cf1fc4757428cf796c7b1f2327d63b9b","access_level":"public","create_time":"$D2019-02-18T12:26:41.063Z","update_time":"$D2019-04-05T08:35:54.105Z","view_time":null,"first_public_time":"$D2019-02-20T11:29:18.920Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"5dcb3bb7054187b5","login":"varholak-peter","name":"Peter Varholak","avatar_url":"https://avatars-next.observableusercontent.com/772bcdd820800f5b68a0b965fc268ca80cc3e5cec34e34c14078e6db0b97ea75","tier":"starter_2024","bio":""},"version":469,"publish_version":469,"role":null,"authored":false,"authors":[{"type":"individual","id":"30a69b13a2c79642","login":"varholak-peter","name":"Peter Varholak","avatar_url":"https://avatars-next.observableusercontent.com/772bcdd820800f5b68a0b965fc268ca80cc3e5cec34e34c14078e6db0b97ea75","tier":null,"bio":""}],"members":[{"type":"individual","id":"30a69b13a2c79642","login":"varholak-peter","name":"Peter Varholak","avatar_url":"https://avatars-next.observableusercontent.com/772bcdd820800f5b68a0b965fc268ca80cc3e5cec34e34c14078e6db0b97ea75","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Observable Introduction Workshop","cells":[{"id":0,"value":"md`# Observable Introduction Workshop\n\nWelcome to Observable! This notebook gives a quick but technical overview of Observable’s features. For a slightly longer introduction, see [Introduction to Notebooks](https://beta.observablehq.com/@mbostock/introduction-to-notebooks) and [introductory tutorial series](https://beta.observablehq.com/collection/introduction). If you want to watch rather than read, we’ve also posted a [short video introduction](https://www.youtube.com/watch?v=uEmDwflQ3xE)!\n\nAn Observable notebook is a sequence of cells. Each cell is a snippet of JavaScript. You can see (and edit!) the code for any cell by clicking the caret in the left margin.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"2 * 3 * 7","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"{\n let sum = 0;\n for (let i = 0; i <= 100; ++i) {\n sum += i;\n }\n return sum;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`Cells can have names. This allows a cell’s value to be referenced by other cells.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"color = \"red\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"`My favorite color is ${color}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"sumFirst100 = {\n let sum = 0;\n for (let i = 0; i <= 100; ++i) {\n sum += i;\n }\n return sum;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"sumFirst100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`A cell referencing another cell is re-evaluated automatically when the referenced value changes. Try editing the definition of *color* above and shift-return to re-evaluate.\n\nCells can generate DOM (HTML, SVG, Canvas, WebGL, *etc.*). You can use the standard DOM API like *document*.createElement, or use the built-in *html* tagged template literal:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"html`\n My favorite language is HTML.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`There’s a Markdown tagged template literal, too. (This notebook is written in Markdown.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`My favorite language is *Markdown*.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`DOM can be made reactive simply by referring to other cells. The next cell refers to *color*. (Try editing the definition of *color* above.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"html`My favorite color is ${color}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`Sometimes you need to load data from a remote server, or compute something expensive in a web worker. For that, cells can be defined asynchronously using [promises](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Using_promises):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`A cell that refers to a promise cell sees the value when it is resolved; this implicit await means that referencing cells don’t care whether the value is synchronous or not. Edit the *status* cell above to see the cell below update after two seconds.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"status","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`Promises are also useful for loading libraries from npm. Below, \\`require\\` returns a promise that resolves to the d3-fetch library:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"d3 = require(\"d3-fetch@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`If you prefer, you can use async and await explicitly:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"countries = (await d3.tsv(\"https://unpkg.com/world-atlas@1/world/110m.tsv\"))\n .sort((a, b) => b.pop_est - a.pop_est) // Sort by descending estimated population.\n .slice(0, 10) // Take the top ten.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`Cells can be defined as [generators](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators); a value is yielded up to sixty times a second.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"i = {\n let i = 0;\n while (true) {\n yield ++i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"`The current value of i is ${i}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"md`Any cell that refers to a generator cell sees its current value; the referencing cell is re-evaluated whenever the generator yields a new value. As you might guess, a generator can yield promises for [async iteration](https://github.com/tc39/proposal-async-iteration); referencing cells see the current resolved value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"date = {\n while (true) {\n yield new Promise(resolve => {\n setTimeout(() => resolve(new Date), 1000);\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`Combining these primitives—promises, generators and DOM—you can build custom user interfaces. Here’s a slider and a generator that yields the slider’s value:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"slider = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"sliderValue = Generators.input(slider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md`Generators.input returns a generator that yields promises. The promise resolves whenever the associated input element emits an input event. You don’t need to implement that generator by hand, though. There’s a builtin viewof operator which exposes the current value of a given input element:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof value = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"viewof colorPicker = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"ColorComponent = ({ color }) => html`${color}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"html`You picked ${ColorComponent({ color: colorPicker })}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"viewof flexCount = {\n const element = html`

💪

`;\n element.value = 0;\n element.onclick = () => {\n ++element.value;\n element.dispatchEvent(new CustomEvent(\"input\"));\n };\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"html`Flex count: ${flexCount}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"viewof r = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"html`Red: ${r}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"viewof g = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"html`Green: ${g}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"viewof b = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"html`Blue: ${b}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`You can import cells from other notebooks. To demonstrate how custom user interfaces can expose arbitrary values to other cells, here’s a brushable scatterplot of cars showing the inverse relationship between horsepower and fuel efficiency.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"import {viewof selection as cars} from \"@mbostock/d3-brushable-scatterplot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"viewof cars","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"cars","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"md`${Array.from(new Set(cars.map(c => c.name)))\n .sort()\n .map(c => `* ${c}`)\n .join(\"\\n\")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"md`What even is a comment?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"viewof pictureUpload = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"md`## 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"import {mac, keySymbols, keyWords} from \"@mbostock/keys\"\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"