3c:null 3d:["$","title",null,{"children":"A Taste of Observable | HARUN PEHLİVAN | Observable"}] 43:T4c6,exampleNote = note(htl.html`Note: You can also use the Files icon in the upper-right of the notebook (then click the plus sign next to File attachments).`)44:T48a,That was just a taste of Observable. There is a lot more: - [Adding cells](https://observablehq.com/@observablehq/adding-cells): More about the add cell menu - Importing from [`.xlsx` files](https://observablehq.com/@observablehq/xlsx) - [Fetching from a URL or querying a database](/@observablehq/introduction-to-data) - Using pre-packaged [templates](https://observablehq.com/templates) - [Importing](https://observablehq.com/@observablehq/introduction-to-imports?collection=@observablehq/notebook-fundamentals) functionality in named cells from other notebooks - [Embedding](https://observablehq.com/@observablehq/introduction-to-embedding) results into a Web page for others - Using [promises](https://observablehq.com/@observablehq/introduction-to-promises?collection=@observablehq/javascript-in-observable) and *await* to handle asynchronous values - Using [generators](https://observablehq.com/@observablehq/introduction-to-generators?collection=@observablehq/javascript-in-observable) in combination with [promises](https://observablehq.com/@observablehq/introduction-to-promises?collection=@observablehq/javascript-in-observable) for interactive views 45:T46d,To learn 🤔 more, open the help pane in the right margin, where you’ll find our quick guides. Also, see our [Documentation main page](https://observablehq.com/@observablehq/documentation), and **Learning more** immediately following. Explore, learn, and have fun! 👋46:T44d,Different folks have different learning styles, so in addition to the help pane, see our videos or tutorials: - [Videos](https://observablehq.com/collection/@observablehq/learning-observable) - [Tutorials](https://observablehq.com/tutorials)47:[{"id":"b5fc92a6c41db8acc70d5881c5abfd1c6abc1bb5d4ac8402ed7483163f59b15567706ed767b8c747c23750645173923b4cfe7f1c242bc0746594fc4af42e8ecf","href":"https://static.observableusercontent.com/files/b5fc92a6c41db8acc70d5881c5abfd1c6abc1bb5d4ac8402ed7483163f59b15567706ed767b8c747c23750645173923b4cfe7f1c242bc0746594fc4af42e8ecf","name":"JavaScript_Table_Add_Cell_Menu.png","type":"image/png","lastModified":1674512226099.081,"size":67742},{"id":"2bedd4979c398f444ee765781daf24ca55b73ac353a2692ab36b6b7df8ddb78f6efe3b0207f31fca438e6ca71cef51a7cd1232c2c099ac97bb90d30c50515277","href":"https://static.observableusercontent.com/files/2bedd4979c398f444ee765781daf24ca55b73ac353a2692ab36b6b7df8ddb78f6efe3b0207f31fca438e6ca71cef51a7cd1232c2c099ac97bb90d30c50515277","name":"fileAttachmentFromAddCellMenu.png","type":"image/png","lastModified":1674512226099.081,"size":39817},{"id":"31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","href":"https://static.observableusercontent.com/files/31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","name":"athletes@2.csv","type":"text/csv","lastModified":1674512226099.081,"size":841836},{"id":"a1d97083ae9944418f968c8b315977201ebd85768cdbf6dfc9952b8a7aec0d93811c8a044b112c18fd48b4dfdd601c8b30946f5fdf9c20e7fe4c8deffa8d0504","href":"https://static.observableusercontent.com/files/a1d97083ae9944418f968c8b315977201ebd85768cdbf6dfc9952b8a7aec0d93811c8a044b112c18fd48b4dfdd601c8b30946f5fdf9c20e7fe4c8deffa8d0504","name":"scatterplotFromAddCellMenu_v2.png","type":"image/png","lastModified":1674512226099.081,"size":46925}] 41:{"id":"8b57e142b5ef8edc","slug":null,"title":"A Taste of Observable","thumbnail":"e096f8c66c7d73e2420a2eedb74eda865f3dc39b611cc9e07c57b62ce099c3cc","access_level":"public","create_time":"$D2023-01-23T22:17:06.099Z","update_time":"$D2023-01-23T22:17:06.099Z","view_time":null,"first_public_time":"$D2023-01-23T22:17:06.099Z","has_unpublished_edits":null,"fork":{"id":"4e36c4335cde0fd3","slug":"a-taste-of-observable","title":"A taste of Observable","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"89871c66e55ab006","login":"harunpehlivan","name":"HARUN PEHLİVAN","avatar_url":"https://avatars-next.observableusercontent.com/d9c058ebc3dfacd1790ad624b5314b38677368ebeea1a92b6772e4d6eaeb8d00","tier":"starter_2024","bio":"22/07/1984 Çorum'da Doğdum Aslen Samsun'un Havza ilçesi "},"version":1246,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8c0808d73a4defaf","login":"harunpehlivan","name":"HARUN PEHLİVAN","avatar_url":"https://avatars-next.observableusercontent.com/d9c058ebc3dfacd1790ad624b5314b38677368ebeea1a92b6772e4d6eaeb8d00","tier":null,"bio":"22/07/1984 Çorum'da Doğdum Aslen Samsun'un Havza ilçesi "}],"members":[{"type":"individual","id":"8c0808d73a4defaf","login":"harunpehlivan","name":"HARUN PEHLİVAN","avatar_url":"https://avatars-next.observableusercontent.com/d9c058ebc3dfacd1790ad624b5314b38677368ebeea1a92b6772e4d6eaeb8d00","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"A Taste of Observable","cells":[{"id":0,"value":"# A Taste of Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":853,"value":"Hello and welcome to Observable! 👋 We're glad you decided to create an account. Here we'll show you the basics of Observable, cover a few key concepts, and get you started.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":854,"value":"**What you are reading now—this page or document—is an Observable notebook.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":855,"value":"A notebook is both a final product for presentation, and a large blank canvas for trying out ideas and calculations. How do you start? By creating **cells**. Cells are where you place content—text, JavaScript code, or other instructions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":856,"value":"A_sample_JavaScript_cell_yielding_a_result = 22/7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"**Notebooks are made of cells.** Another sample:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":858,"value":"\"Hello, I am a *Markdown* cell; I contain *formatted* **text**. My edit area (the shaded part) is pinned open so you can see it.\"","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":859,"value":"**A cell's code or content is in the shaded area; the results display immediately above.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":860,"value":"Every cell in an Observable notebook is editable. To display the shaded edit area, click in the left margin. **Try it** on this cell. Then try it on that cell with the (approximate) value of `pi`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":861,"value":"Cells, because they are easily created, viewed, and modified, are a fundamental part of what makes Observable an environment for *trying out* ideas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":862,"value":"#### Try it\n1. Mouse over the left margin until you see a plus sign (+), then **click the plus sign (+) to create a new cell**.\nYou'll see a menu of new cell choices appear. Notice the first three choices are JavaScript, **Markdown** (we'll use this one), and HTML.\n2. **Use the mouse, or up and down arrow keys, to pick the cell type** (pick **Markdown** for now), then type some text.\n3. **Click the blue triangle (or type Shift-Return) to finish and run the cell**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":863,"value":"Congratulations! You've created your first Observable cell.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":864,"value":"When you created that cell, you saw the most common cell types:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":865,"value":"- JavaScript cells (the default), for logic, calculations, and calls to JavaScript libraries\n- [Markdown](https://observablehq.com/@observablehq/markdown-quick-reference) cells for text\n- HTML cells, for HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1210,"value":"You also saw a lot of other choices under the [add cell menu](https://observablehq.com/@observablehq/adding-cells). Many of these choices will create sample charts, buttons, or other visual elements, using JavaScript code. \n\nLet's do some work with JavaScript cells now. (It doesn't matter if you're a JavaScript beginner; you'll see why in a moment.) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":867,"value":"Here is a JavaScript cell that displays data in a table:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1246,"value":"viewof table = Inputs.table(cars)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"How could you have created this table yourself? By selecting the **JavaScript Table** from the add cell menu.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":871,"value":"

\n \n

Choose the JavaScript Table menu item to create a new table with sample data.

\n \n

Choose File attachment to attach a file with sample data.

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1237,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"For the Olympic athlete data example that follows, we attached the file ahead of time (data credit to [Matt Riggott](https://www.flother.is/blog/olympic-games-data/)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1235,"value":"data = await FileAttachment(\"athletes@2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data","database":"$undefined"},{"id":878,"value":"The `.csv` file is recognized and a data table cell is automatically created.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":880,"value":"You can attach any kind of file, such as `.xlsx`, `.gif`, `.json`. If Observable knows how to interpret the file, it will do so automatically. (See the [File Attachments](https://observablehq.com/@observablehq/file-attachments) notebook for more information about attaching files.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":881,"value":"After attaching a file and viewing its data in a table, the natural next step is to plot the data. Let's look at a scatterplot based on the `athletes.csv` data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":882,"value":"Plot.plot({\n marks: [\n Plot.dot(data, {x: \"weight\", y: \"height\", stroke: \"sex\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"How can you create this scatterplot yourself? Type \"scatterplot\" into the add cell menu.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1198,"value":"

\n \n

Start typing \"sc\" in the add cell menu and the Scatterplot chart menu item appears.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":884,"value":"#### Try it\n1. Create a new JavaScript cell by clicking the plus sign.\n2. Start typing \"scatterplot\" (you won't have to type the entire word). The **Scatterplot chart** menu item appears.\n3. Click **Scatterplot chart** to paste in the Scatterplot chart code.\n4. Edit the `Plot.dot` line to resemble the code in the example.\n5. Be sure to click the blue triangle, or type Shift-Return, to see the results.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":885,"value":"Let's try one more thing with the scatterplot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":886,"value":"#### Try it\nTry changing the definition of `stroke` to \"weight\" instead of \"sex\". What happens? (Don't forget to click the blue triangle or type Shift-Enter.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":887,"value":"Aha! So the scatterplot is not just a static display, not just an included screenshot from some other graphic program: It can react to changes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":888,"value":"**Observable cells are reactive; they can update based on new data or user input.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":889,"value":"This works because of the way Observable uses [dataflow](https://observablehq.com/@observablehq/how-observable-runs) to determine which values are dependent on others, and recalculates as needed (like a spreadsheet).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":890,"value":"The real magic 🧙‍♀️ comes when you add **interactivity**. If you use `viewof` with an [input](/@observablehq/inputs), you can quickly provide an interactive UI.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":891,"value":"viewof myColorScheme = Inputs.select([\"rdbu\", \"piyg\", \"puor\", \"spectral\", \"blues\", \"reds\", \"warm\", \"cool\"], {label: \"Color scheme\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"Plot.plot({\n color: {\n type: \"diverging\",\n scheme: myColorScheme,\n reverse: true\n },\n marks: [\n Plot.dot(data, {x: \"weight\", y: \"height\", stroke: \"weight\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"Use the drop-down list to pick a color scheme, and watch the scatterplot change color. Thanks to dataflow, the scatterplot automatically re-runs when its inputs change! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":894,"value":"One final **Try it**, if you want to save everything you've created so far in this notebook:\n1. Scroll to the top of the browser window.\n2. Click the notebook menu button (**...**).\n3. Click **Fork**. This creates a copy of the notebook under your account. You can then modify the forked copy as much as you like.\n4. Bookmark the URL for the fork for convenience (although you can always find it under the **Notebooks** link for your account).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":895,"value":"$44","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":896,"value":"As you explore and learn, don't worry if you feel you are going slowly. Experienced users will tell you how much faster Observable is to use now, but you should still go at your own pace in terms of learning. We want you to make Observable part of your standard toolkit, not something that you bring out only for special occasions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":897,"value":"### Observable speed tips\nWhen you *are* up to speed and want to move more quickly, the following tips will help:\n- Run the current cell: ${keys(\"Shift-Enter\")}\n- Create a new cell after the current cell: ${keys(\"Mod-Enter\")}.\n- Undo the last change: ${keys(\"Mod-Z\")}\n- Delete cells: ${keys(\"Alt-Backspace\")}\n- Other keyboard shortcuts are [here](https://observablehq.com/@observablehq/keyboard-shortcuts).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":898,"value":"- Moving cells: Move your pointer to the three dots symbol in the left margin, then drag the cell to the spot you want.\n- You can read what type a cell is from the symbol in the left margin of the edit area.\n- When editing a [Markdown](https://observablehq.com/@observablehq/markdown-quick-reference) cell, common formatting commands appear as buttons in the cell toolbar (at the bottom of the browser window).\n- Reminder sheet of the basics: [Getting Started](https://observablehq.com/@observablehq/getting-started).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":899,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":900,"value":"## Learning more","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"learningMore","database":"$undefined"},{"id":901,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":902,"value":"We also have introductory tutorial sequences designed for folks with different past experiences:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":903,"value":"- **[Observable Plot](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot)**
Many of the examples you saw above come from Observable Plot, a free, open-source JavaScript library for quickly visualizing tabular data. It's ideal for exploring data you've already collected and for gleaning insights from that data.\n \n- **[Observable for Jupyter Users](/@observablehq/observable-for-jupyter-users?collection=@observablehq/observable-for-jupyter-users)**
If you have a Python data science background, or just feel more comfortable in Python than in JavaScript, these tutorials will help ease you in.\n\n- **[Learn D3](https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3)**
D3 is a powerful JavaScript library that helps you bring data to life using HTML, SVG, and CSS. If you already have some D3 under your belt, you'll find using D3 in Observable is a little bit different. Whether you're new to D3, Observable, or both, get your feet wet here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":904,"value":"For the latest inspiring work being done by the Observable community, check out the [Explore](https://observablehq.com/explore) page.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":839,"value":"*(Thanks to Jeremy Ashkenas, who created the original version of this notebook!)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":905,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":906,"value":"(This is an area for code used in the rest of the notebook.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":907,"value":"async function icon2(file, {width = \"16px\"} = {}) {\n const src = await file.url();\n return () => htl.html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"import {keys as keysText, mac} from \"@mbostock/keys\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"keys = s => html`${keysText(s)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1227,"value":"// 2022.06: Fabian Iwand's suggested improvement for Note:\nnote = {\n const scope = DOM.uid(\"note\").id;\n const style = document.head.appendChild(htl.html`