2e:null 2f:["$","title",null,{"children":"Hello Observable | Jo Wood | Observable"}] 34:T7d1,# Hello Observable *Some notes I made when I was first learning to use Observable in 2018. These are kept for personal historical interest and have been left mostly untouched other than to convert to Observable 2.0 runtime and add specific notes.* ## 1. Notebook Structure Observable is an example of a [literate programming notebook envrionment](https://marybethkery.com/projects/Verdant/Kery-The-Story-in-the-Notebook-Exploratory-Data-Science-using-a-Literate-Programming-Tool.pdf) like [jupyter](https://jupyter.org), [R markdown](https://rmarkdown.rstudio.com) and [litvis](https://github.com/gicentre/litvis). It is made up of *cells* that can contain text or code. Unlike Jupyter, there is no required order of code cells for them to run, and by default, like litvis, all cells are *reactive* meaning they update if their dependecies have changed (no need for 'run all' to keep the page up to date). Text can be written as *markdown*, *HTML* or *LaTeX* depending on the option selected when creating a new cell. Text content follows between backticks that can span multiple lines. Keyboard shortcuts for **bold** and *italic* writing formatted code fast and text inside pairs of \` (backticks) will be formatted as `monospace` . Text can contain [JavaScript template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) when you wish to integrate JavaScript into the body of a text-based cell. To keep source (markdown, JavaScript etc.) hidden, ensure the pin icon to the left of a cell is grey, toggling it if necessary. You can view the source by clicking anywhere to the left of a cell. To make the source exposed by default, click the pin icon to make it pinneed (should turn blue). To activate a cell after editing it, including markdown text cells, use keyboard shortcut `Shift+Return` (or the blue triangle in the top-right of the edited cell). This will also update any dependent cells elsewhere in the document.35:T407,(To explain the `range` function where, for example, `range(4,7)` creates an array `[4,5,6,7]`: [`Array(mx + 1 - mn)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array) creates an empty array of the correct size; [`keys()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys) provides an [iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) that can sequentially process each array index value; the `...` [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) expands the iterator into its actual values (i.e. the array indices 0,1,2 etc.); and [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) applies the given function to each value in an array. Arrow functions, especially when combined with a functional style of programming give us a nice compact form of expression.)36:[{"id":"3b896194c26f7d81fbd664e747b89adfd083e1b3f594a60f1e9995c84f005d4d2120ca004201e57c42473b6ac481f55611c5b0c86bbdb2f1d104457b350f2cd0","href":"https://static.observableusercontent.com/files/3b896194c26f7d81fbd664e747b89adfd083e1b3f594a60f1e9995c84f005d4d2120ca004201e57c42473b6ac481f55611c5b0c86bbdb2f1d104457b350f2cd0","name":"tufte.txt","type":"text/plain","lastModified":1616918400761.268,"size":539}] 32:{"id":"76c56f4e4867b9e7","slug":"hello-observable","title":"Hello Observable","thumbnail":"34e8a5dd79960a603d33094da71e0cf7a3c6f6b5978acdb8d1210d399ee7f881","access_level":"public","create_time":"$D2021-03-27T15:05:09.129Z","update_time":"$D2026-09-10T05:35:18.316Z","view_time":null,"first_public_time":"$D2021-05-01T06:57:07.282Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":924,"publish_version":924,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"members":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"ae8896a1274d5f06","slug":"hello","title":"Hello","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"type":"notebook","body":{"title":"Hello Observable","cells":[{"id":765,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"To add a new cell, click the `+` symobl between existing cells.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"

When using html for content, you can apply css styling in the content.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"For maths formulae, you can create LaTeX math-mode content","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"sd=\\sqrt{\\frac{1}{n-1}\\sum_{i=1}^n(x_i-\\bar{x})^2}","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"I'd strongly recommend setting prettier formatting by going to *'Settings'* (accessible from your icon at top of page) and making sure *'Auto-format code'* is ticked. I also have *'Enable auto-close pairs'* selected for closing brackets, quotes etc. and *'Enable experimental or “labs” features in Observable'* for collaborative document editing.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"## 2. JavaScript\n\nJavaScript is the native language of Observable and allows any(?) existing JavaScript library or npm package to be integrated into a notebook page. This is what gives Observable such potential.\n\nYou can integrate JavaScript code in number of ways. The simplest is to create a dedicated cell containing the code such as the one below. It is pinned to show the code, but it need not be.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"Math.sqrt(2)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"Anonymous multi-line code blocks are encloded in curly braces. Named code blocks no longer availble. Use either an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) or `display()` (side effect code block). x*x)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"Named functions can be specified anywhere in the document for referencing anywhere else in the same document or even other documents. They can use the JavaScript 'function' syntax:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"function isEven(n) {\n return n % 2 == 0;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"or Javascript's arrow notation: Should prefix with `const ` to make a top-level function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"square = x => x*x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"range = (mn, mx) => [...Array(mx + 1 - mn).keys()].map((x) => x + mn)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"intersperse = (xs, y) => xs.reduce((acc, v) => [...acc, v, y], []).slice(0, -1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"(To explain the *intersperse* function that, inserts a given value `y` between every item in an array `xs`: [`reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) processes each item `v` in an array, building an *accumulator* `acc` with the given function); that function spreads the accumulated values so far, adding each value `v` followed by the separator `y`; after accumulating, [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) removes the last element of the array).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"Functions specified somewhere in the document can also be referenced inline using JavaScript's [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). For example, here are the even squares up to 100 generated by the functions above, ${intersperse(\n range(1, 10).map(square).filter(isEven),\n \", \"\n)} embedded in a paragraph of text.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"Normally, I will adopt the convention of using the 'function' syntax for top-level functions in a document and arrow notation for inline functions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"## 3. Importing and requiring libraries\n\nMany documents will take advantage of existing JavaScript libraries to perform certain tasks. These can be linked directly in any cell and so become available to all other cells in a document. We can link with any library with [`require`](https://next.observablehq.com/@observablehq/introduction-to-require). By default, Observable will look for [npm modules](https://www.npmjs.com) when specified this way, but it is also possible to provide a full URL to any JavaScript library.\n\n`require` no longer used. Now all via static `import` with prefix for source, such as `npm:` or `observable:` \n\nThere are a number of common libraries that are [linked by default](https://observablehq.com/@observablehq/recommended-libraries) so don't need explicit importing. These include d3, standard input elements and vega-lite among others.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"We can also link directly with another observable document with [`import`](https://next.observablehq.com/@observablehq/introduction-to-imports) and if desired, select which parts of the document to import. This makes the network of public Observable documents a very useful and extensible resource.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"## 4. Input Elements\n\nWe can use native html input elements (buttons, sliders etc) and concisely attach their values to JavaScript code using [`viewof`](https://next.observablehq.com/@observablehq/a-brief-introduction-to-viewof). Here's an example that will customise a range of input values according to a maximum set in a slider (stored in the document-wide function `maxVal`). Try dragging the slider to see its value being propagated to the cell displaying square numbers.\n\nNow uses a `view` function in place of the Observable 1.0-specific `viewof`. For example, `const maxVal = view(...)`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"viewof maxVal = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"Some more even squares ${intersperse(\n range(1, maxVal)\n .map(square)\n .filter(isEven),\n ', '\n)}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"Altenatively we can use Observable's [built-in components](https://next.observablehq.com/@observablehq/inputs) by referencing `Inputs` and using `viewof` to display them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"viewof maxVal2 = Inputs.range([1, 64], { step: 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"Yet more squares: ${intersperse(range(1,maxVal2).map(square),', ')}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"## 5. File loading and Promises\n\nAs with normal JavaScript, some actions are carried out *asynchronously*, especially file loading and http requests. These are managed via [promises](https://next.observablehq.com/@observablehq/introduction-to-promises). For details of various file loading approaches, see this [introduction to data](https://next.observablehq.com/@observablehq/introduction-to-data).\n\nAny function that generates a promise will propagate its resolution to other cells once it has completed. To use the result in the same cell, we must [`await`](https://next.observablehq.com/@observablehq/introduction-to-promises) the result before doing something with it. In the example below we await the promise generated by *d3.csv* and then pass it to the [`Inputs.table`](https://observablehq.com/@observablehq/input-table) input element to view as a nicely formatted table (remembering that `Table` is defined in the linked-by-default Observable [Inputs](https://observablehq.com/@observablehq/inputs)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"myTable = Inputs.table(\n await d3.csv(`https://gicentre.github.io/data/euPolls.csv`)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"Alternatively, a local file can be [attached to a document](https://next.observablehq.com/@observablehq/file-attachments). A copy of the file will become associated with the document and will have the the same public/private status as the document itself. In other words, publishing an observable document as public will also publish a copy of any attached files. To attach a file, click the paperclip icon on the right of the document.\n\nHere's an example of an attached text file displayed as markdown:\n\n> ${quote}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"quote = (await FileAttachment(\"tufte.txt\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"A more general approach to content loading, especially useful when making http API requests, is to [`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) a completed promise from JavaScript's [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"dog = (await fetch(`https://dog.ceo/api/breeds/image/random`)).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"## 6. Further Reading\n\nI found the following useful documents that supported my early (and continued) use of Observable and JavaScript.\n\n* [Observable talk](https://talk.observablehq.com) for disucssions and examples related to Observable\n* [Modern JavaScript tutorial](https://javascript.info/) One of the best JavaScript tutorial resources.\n* [IDL's Introduction to D3](https://next.observablehq.com/@uwdata/introduction-to-d3-part-1)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"2","titling":"auto"}} 33:"$32:body"