30:T4c8,md` - Observable [Introduction to HTML by Mike Bostock](https://observablehq.com/@observablehq/introduction-to-html), which introduces reactive Markdown, ${tex`\KaTeX`} for math, sparklines for a chart inline with prose, using canvas, using D3, using SVG tagged template literals, using \`viewof\` to react to an input element's changing value, and adding global CSS using html tagged template literals: ${inlineCode("html`<style> .highlight { background: yellow; } </style>`")}. - Observable [Introduction to Promises by Mike Bostock](https://observablehq.com/@observablehq/introduction-to-promises), which introduces Observable's \`delay\`, \`tick\` and \`when\` functions. - [Observable's not JavaScript by Mike Bostock](https://observablehq.com/@observablehq/observables-not-javascript). This highlights some "gotchas" to look out for working with Observable, such as "you'll need to wrap object literals in parentheses or use a block statement with a return" e.g. \`object = ({foo: "bar"})\`. It also introduces Observable's "special mutable operator so you can opt-in to mutable state: you can set the value of a mutable from another cell". Finally, it talks about how to import things across notebooks. `31:[{"id":"e5096cff841c0f7d54f2251c861c49cc767c1f315ed1fddecfcc93b57b288bfd46afb02121de23e2542b2969038b74fd54ddc85a9467c1f24d82d2f38099ea38","href":"https://static.observableusercontent.com/files/e5096cff841c0f7d54f2251c861c49cc767c1f315ed1fddecfcc93b57b288bfd46afb02121de23e2542b2969038b74fd54ddc85a9467c1f24d82d2f38099ea38","name":"image@1.png","type":"image/png","lastModified":1592712838481.972,"size":33446},{"id":"4e3b9a892147c8d66acd9ae0c8911981b835b639026b953bdf03a2984149b31af87014883d5ff532ad2a8186129bfe6057577a7fcf6668bf0b0172ac40f5aace","href":"https://static.observableusercontent.com/files/4e3b9a892147c8d66acd9ae0c8911981b835b639026b953bdf03a2984149b31af87014883d5ff532ad2a8186129bfe6057577a7fcf6668bf0b0172ac40f5aace","name":"image.png","type":"image/png","lastModified":1589761793453.937,"size":48575}] 2e:{"title":"Observable","cells":[{"id":0,"value":"md`# Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"tableOfContents = md`## Table of Contents`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`\n- [Keyboard shortcuts](#keyboardShortcuts)\n- [Using data on Observable](#usingDataOnObservable)\n- [Observable behaviour](#observableBehaviour)\n- [Writing Observable notebooks](#writingObservableNotebooks)\n- [Images](#images)\n- [Observable utilities](#observableUtilities)\n- [Appendix](#appendix)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"keyboardShortcuts = md`## Keyboard shortcuts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`Some kinda helpful shortcuts include:\n\n- ? to show keyboard shortcuts.\n- ⌃⇧P to unpin.\n- Escape to deselect the cell.\n- j/k to select the cell above or below for cell actions and enter cell selection mode.\n- o/O to insert a new cell above/below.\n- ⌥Enter to split the current cell, focusing the cell after. If the caret is at the end of the current cell, this is equivalent to inserting a new empty cell.\n- Together, I could run Escape, k, o to insert new cell, but that's no faster than ⌘↓ and ⌥Enter.\n\nReference links:\n\n- [Announcing cell shortcuts](https://observablehq.com/@observablehq/cell-shortcuts)\n- [Keyboard Shortcuts](https://observablehq.com/@observablehq/keyboard-shortcuts)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`To write multiple unpinned Markdown cells in a row:\n\n1. Write the first cell's Markdown content using a Markdown tagged template string.\n2. Unpin it using ⌃⇧P\n3. Write the next cell's Markdown tagged template string\n4. In between them, use ⌥Enter to split the cell into another unpinned cell\n\nHere, I use a pipe to show where to put your cursor when you split the cell:\n\n~~~\nmd\\`The first cell's content.\\`|md\\`\\`\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"usingDataOnObservable = md`## Using data on Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"variables = md`### Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`I like this general approach of renaming fields upon parsing the data file to standard chart field names such as \"x\" and \"y\":\n\n~~~ js\n Object.assign(\n d3.csvParse(await FileAttachment(…).text(), \n ({MyDataTitleField: name, MyDataXField: x, MyDataYField: y}) => ({name, x: +x, y: +y}))\n )\n~~~\n\nThis lets me use any Observable chart code with my own data while just updating one cell instead of everywhere the variables are mentioned throughout various cells in a notebook.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"tidyData = md`### Tidy data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`\"**[Tidy data](https://cran.r-project.org/web/packages/tidyr/vignettes/tidy-data.html)**\" is where:\n 1. Each variable forms a column\n 2. Each observation forms a row.\n 3. Each type of observational unit forms a table.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"observableBehaviour = md`## Observable behaviour`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"imports = md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`[Introduction to imports](https://observablehq.com/@observablehq/introduction-to-imports) shows how to use \"as\" and \"with\" e.g.:\n\n~~~js\nimport {chart as treemap} with {treemap_data as data} from \"@d3/treemap\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"require = md`### Require`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`An [Introduction to require](https://observablehq.com/@observablehq/introduction-to-require).\n\nApparently you can have **multiple inputs** at once such as:\n\n~~~js\nd3CsvAndFetch = require(\"d3-dsv@1\", \"d3-selection@1\")\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"views = md`### Views`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`In Observable, a **view** is \"a user interface element that directly controls a value in the notebook\". It has two parts: a view (typically an interactive DOM element) and value (any JavaScript value). See also: [Introduction to Views by Mike Bostock](https://observablehq.com/@observablehq/introduction-to-views).\n\nIt seems that a **viewof** is a second hidden cell that shows the current value of a user interface input element. See: [A Brief Introduction to Viewof by Mike Bostock](https://observablehq.com/@observablehq/a-brief-introduction-to-viewof?collection=@observablehq/introduction).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"writingObservableNotebooks = md`## Writing Observable notebooks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`You can **use ~~~ for code fences** in Observable. For example:\n~~~ js\nimport {vl} from '@didoesdigital/vega-lite-api-vega-lite-v4'\n~~~\n\nThis means you don't have to escape back ticks for code fences. You can also use named code fences like \\`~~~ js\\` to style it as JavaScript code.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`- Example of notebook used as slide deck: [Welcome: UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues by Michael Freeman](https://observablehq.com/@info474/welcome?collection=@info474/tutorials) using [Slides by Michael Freeman](https://observablehq.com/@mkfreeman/slides)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"namedCells = md`### Named cells`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`Name your cells in Observable. For example, the heading above:\n\n~~~js\nnamedCells = md\\`### Named cells\\`\n~~~\n\nThis creates an anchor tag you can link to in Markdown. For example, this link will navigate to the [Named cells](https://observablehq.com/@didoesdigital/observable?collection=@didoesdigital/reference#namedCells) heading. You can find the full URL to that named cells in the cell actions menu by clicking the 3 dots to the left of the cell (at the time of writing) and clicking the cell name, which will navigate to the cell and update your URL to with the cell's fragment identifier.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`Naming cells also makes the minimap more useful for navigation:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"{\n const image = await FileAttachment(\"image@1.png\").image();\n image.alt = \"Minimap showing named cells for chart, x, y, xAxis, chartTitle, chartBy, height, margin, barChartStyles, dataTableStyles, accessibleDataTable, render_data_table, data, and d3.\"\n image.width = 200;\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"md`Named cells is what makes the [Table of Contents](#tableOfContents) in the notebook possible.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"images = md`## Images`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`To attach an image, either:\n\n- Paste your image from your clipboard using ⌘v, or\n- Use ⌘⇧U to show a file picker and select one from your file system.\n\nThen, see the cell below to add an \\`alt\\` text description and adjust styling.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"image = {\n const image = await FileAttachment(\"image.png\").image();\n image.alt = \"A donut chart of 'A Scone' that's 100% delicious. \"\n image.width = 375;\n return image;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"observableUtilities = md`## Observable utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`\n- [Data Utilities by Jeffrey Heer](https://observablehq.com/@uwdata/data-utilities#printTable)\n- [P-001 / Notebook Series Template by Benjamin](https://observablehq.com/@hastebrot/p-001-notebook-series-template)\n- [Signature - A Documentation Toolkit](https://observablehq.com/@mootari/signature)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"mdSearch = md`## Search`","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`[Searching on Observable by Wiltse Carpenter](https://observablehq.com/@observablehq/searching-on-observable)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"inlineCode = code =>\n html`${code}`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}