29:null 2a:["$","title",null,{"children":"Introduction to Notebook coding with Observable | Phil Renaud | Observable"}] 2f:[] 2d:{"id":"df2e0a3c8787c011","slug":"introduction-to-notebook-coding-with-observable","title":"Introduction to Notebook coding with Observable","thumbnail":"2c7a133614148c3d0dc991d8f9b7b41d78ef9b324668284ff41a2182b01f40ca","access_level":"public","create_time":"$D2018-02-27T16:30:20.234Z","update_time":"$D2019-05-22T15:56:22.599Z","view_time":null,"first_public_time":"$D2018-02-28T17:52:39.925Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"a0190f7b90d061fc","login":"philrenaud","name":"Phil Renaud","avatar_url":"https://avatars-next.observableusercontent.com/1b9c9bb77c5dc93c0b6a13f9c0f6c3fd4b1067c4a93c1645de46a3e8248153e5","tier":"starter_2024"},"version":768,"publish_version":768,"role":null,"authored":false,"authors":[{"type":"individual","id":"c0e3d40c5bc153d6","login":"philrenaud","name":"Phil Renaud","avatar_url":"https://avatars-next.observableusercontent.com/1b9c9bb77c5dc93c0b6a13f9c0f6c3fd4b1067c4a93c1645de46a3e8248153e5","tier":null}],"members":[{"type":"individual","id":"c0e3d40c5bc153d6","login":"philrenaud","name":"Phil Renaud","avatar_url":"https://avatars-next.observableusercontent.com/1b9c9bb77c5dc93c0b6a13f9c0f6c3fd4b1067c4a93c1645de46a3e8248153e5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"title":"Introduction to Notebook coding with Observable","cells":[{"id":0,"value":"md`# Introduction to Notebook coding with Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`## Notebooks as a paradigm`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`\n### bl.ocks and gists and jupyter\n---\nMike Bostock [wrote about](https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3a0) developing an \"Integrated Discovery Environment\" back in April 2017; Last month, Observable launched.\n\nThere are a couple traditions worth talking about here: first is the idea of the notebook as a Computational Essay (see Stephen Wolfram's [What is a Computational Essay?](http://blog.stephenwolfram.com/2017/11/what-is-a-computational-essay/)). Jupyter notebooks, and iPython notebooks before them, are among the most popular. In the realm of Spark, Databricks notebooks are wildly popular; Apache Zeppelin is another.\n\nA second tradition is one more specific to D3 users: [bl.ocks](bl.ocks.org). Bl.ocks is an earlier project by Bostock that allows github gists to be executed in the browser, with local imports handled. See [https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048] for an example\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"md`\n### Forks as a first-class citizen\n---\nWhen you edit your own notebook, your changes are saved automatically.\n\nHowever, when editing someone else's notebook, your changes are discarded when you leave.\n\nIf you want to save the changes you make to a notebook, you can $\"Fork$ *fork* that notebook from the link at the top of the page -- this also appears whenever you make an edit to a cell.\n\nNotebooks, especially Observable's hosted notebooks, foster the idea of sharing data, insights, and techniques -- placing an importance on forking notebooks makes perfect sense and I encourage its liberal use.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"md`\n### Functional programming as a favored approach\n---\nThe natural layout of notebooks is that, while they're executed topologically, they're approached linearly. This lends itself very well to a functional style of programming, with self-contained or neighbourly blocks of executable functions, rather than a larger app state.\n\nThe code layout of a notebook differs greatly from how you might write your application logic in a Node.js project, for example.\n\nCode, after all, is at least as important for human reading as it is for machine reading.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md `## General usage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`### Computable and Referenceable Cells`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`A notebook is a series of *cells*, like this one.\n\nEdit a cell by clicking the * character to the left; play it by clicking shift+enter or the \\`▶︎\\` button on the right.\n\nHold-open a cell's template code by clicking the pin icon when editing\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"md`\nEvery cell is:\n- an executable JavaScript snippet,\n- Editable (click the * to edit, or the Pin to keep code open),\n- nameable for later reference\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"5 * 3 * (5 / 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"firstName = \"Phil\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"color='#00ccff'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"`Hey, my name is ${firstName}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"html`\n

\n And my favourite colour is ${color}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"md`\n### Hotkeys and Shortcuts\n- New Cells: Option+Return\n- Move between cells: Option+Tab / Option+Shift+Tab\n- Holding Shift when clicking on the + between cells will merge those cells\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"md`\n## Cell markup types\n\nObservable handles several markup types; this instructional cell, for example, is wrapped by *md\\`\\`*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"md`For the mathematically inclined, you can write ${tex`\\KaTeX`}, either inline or as blocks:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"tex.block`\\Delta E^*_{00} = \\sqrt{\n \\Big(\\frac{\\Delta L'}{k_LS_L}\\Big)^2 +\n \\Big(\\frac{\\Delta C'}{k_CS_C}\\Big)^2 +\n \\Big(\\frac{\\Delta H'}{k_HS_H}\\Big)^2 +\n R_T\n \\frac{\\Delta C'}{k_CS_C}\n \\frac{\\Delta H'}{k_HS_H}\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"md`\nHTML is also available as a markup type. Better, because cells in a notebook all share a DOM state, you can reference prior elements and styles:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"html`

I am a highlighted paragraph.

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"md`### UI-editable cells`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md`Observable gives the user a variety of html elements that can be bound to variables and generators throughout a notebook by using the *viewof* operator. For example:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"viewof slider = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"slider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"slider**2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"10/slider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"md`### Blocks and Object Literals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"md`You can isolate a code block by placing it in curly brackets; it won't inherit from or pass its details elsewhere`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"{\n const lastName = 'Renaud'\n return lastName\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"lastName","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"md`You can define an [object literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals) by placing it within parentheses:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"({\n firstName: 'Philip',\n lastName: 'Renaud',\n email: 'phil@affinio.com',\n company: 'Affinio'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"md`This can then be referenced later by giving the object literal a name.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"me = ({\n firstName: 'Phil',\n lastName: 'Renaud',\n email: 'phil@affinio.com',\n company: 'Affinio'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md`## Sharing code between cells`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md`You can define a function and declare its name to allow for referential re-use in cells:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"greet = function(name) {\n return `Hello, ${name}!`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"greet(me.firstName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"md`You can now use the *greet()* function in other cells:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"greet(\"Halifax Data Science Meetup\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"md`## Referential Reactivity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"md`A cell that references other cells is re-evaluated automatically whenever the referenced values change. Try editing the *firstName* of the *me* cell above, then click the play button (\\`▶︎\\`) to commit your change; our first *greet()* output 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":410,"value":"randomWalk = {\n let y = 50, values = [y];\n for (let x = 0; x < 500; ++x) values.push(y = y + (Math.random() - 0.5) * 2);\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"{\n const context = DOM.context2d(width, 100);\n context.beginPath();\n context.moveTo(0, randomWalk[0]);\n for (let x = 0; x < width; ++x) context.lineTo(x, randomWalk[x]);\n context.lineJoin = context.lineCap = \"round\";\n context.strokeStyle = stroke;\n context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"stroke = \"red\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"md`\nThink of each cell as a function; its referenced variables as parameters.\n\nIn execution, the notebook waits for the evaluation of any dependent parameters and identifies any place they're referenced. When those parameters are updated, so too are their referencing cells.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"md`\n## Leveraging the browser's native libraries\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"Generators","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"Generators.observe(notify => {\n const mousemoved = event => notify([event.clientX, event.clientY]);\n window.addEventListener(\"mousemove\", mousemoved);\n return () => window.removeEventListener(\"mousemove\", mousemoved);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"md`## Packages, Async, and Promises`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"md`Often you’ll use a helper library such as [D3](https://d3js.org) to generate dynamic content:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"rainbow = d3.interpolateRainbow(now / 1000)\n// now","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"rainbowBox = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"md`### Asynchronous code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md`Some code can be run async:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"status = new Promise(resolve => {\n setTimeout(() => {\n resolve({resolved: new Date});\n }, 2000);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"md`\nSome libraries, like d3, invoke a concept called Promises to allow us to, among other things, fetch data asynchronously.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"data = d3.csv(\"https://gist.githubusercontent.com/mbostock/ddc6d50c313ebe6edb45519f43358c6c/raw/c443ed14c34c5c1b544949a546dd9d0acd05bad3/temperatures.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"md`Observable implicitly awaits promises across cell boundaries, so you often don’t need to deal with a promise directly. Cells can return promises, and other cells can simply refer to the values and they’ll run when the promise resolves.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"data.map(d => +d.Year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`Observable’s standard library has few built-in methods related to Promises.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"Promises","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"Promises.delay(3000, \"Hey, world!\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"md`Observable also provides a handful of [“toy” datasets](https://github.com/observablehq/datasets) which you can load via \\`require\\`. These can be useful if your goal is to experiment with visualization or analysis techniques, rather than to look at a specific dataset. For example, here is a table of Apple’s stock price from 2007 to 2012:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"aapl = require(\"@observablehq/aapl@0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"md`If you transform your data within a notebook, you can use DOM.download to save a local copy of your file. This lets you load the already-transformed data in the future, rather than needing to transform it again on every load, which is particularly useful if your transformed data is much smaller than the original. For example, you can download the Flare data (loaded above) as CSV by clicking the button below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"change = aapl.map((x,iter) => {\n x.date\n if(aapl[iter-1]) {\n x.change = x.close - aapl[iter-1].close;\n }\n else {\n x.change = x.close;\n }\n return x;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"DOM.download(\n new Blob([d3.csvFormat(change)], {type: \"text/csv\"}),\n \"aapl.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`## Javascript as a language for doing Data Science`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"md`\nWe've hardly touched on it, but Javascript over the past few years has come into its own as a proper language for doing statistical programming and data science generally. Visualization frameworks are just the foot in the door. Lodash/Underscore put an emphasis on map/reduce style programming, various geo/mapping libraries exist, etc.\n\nIn my own work, I find myself writing some code in Python and exporting aggregated results to Javascript to visualize, manipulate, and explain. Being the language of the web means that it's often more approachable -- you don't have to run through hoops to get visualizations to run, and the wide swath of developers familiar with javascript means your work is more easily understood.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"md`\n# THANKS Y'ALL\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"md`\n## Further Reading\n- [Observable's Standard Library](https://beta.observablehq.com/@mbostock/standard-library)\n- [Introduction to Asynchronous Iteration](https://beta.observablehq.com/@mbostock/introduction-to-asynchronous-iteration)\n- [Introduction to Mutable State](https://beta.observablehq.com/@jashkenas/introduction-to-mutable-state)\n- Stephen Wolfram's [What is a Computational Essay?](http://blog.stephenwolfram.com/2017/11/what-is-a-computational-essay/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"