30:[] 2e:{"title":"Learing by Doing","cells":[{"id":0,"value":"md`# Learing by Doing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"md`\nThe text in this notebook is a mash-up of the '[Five-Minute Introduction](https://beta.observablehq.com/d/56dd162bedb0a318)', '[Introduction to Code](https://beta.observablehq.com/@mbostock/introduction-to-code)' and '[Introduction to HTML](https://beta.observablehq.com/@mbostock/introduction-to-html)' notebooks by [Mike Bostock](https://beta.observablehq.com/@mbostock), peppered with information from a series on data visualization using D3.js by [Bart Mesuere](https://beta.observablehq.com/@bmesuere).\n\nI reproduce text and examples as a learning exercise.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`\nObservable notebooks are written in [JavaScript](https://developer.mozilla.org/docs/Web/JavaScript), the \"native language\" of the web.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"md`\nObservable notebooks contain cells. You can see (and edit!) the code for any cell by clicking the caret in the left margin.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md` Cells come in two primary forms: *expressions* and *blocks*.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md` Expression cells express the outcome of a function, such as a basic arithmetic expression:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"2 * 3 * 7","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`Blocks are cells and comprising complex data structures such as numbers, strings, arrays and objects, local variables or loops. Blocks are bounded by curly braces, \\`{\\` and \\`}\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"{\n let x = 0;\n for (let i = 1; i <= 100; ++i) {\n x += i;\n }\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`Local variables, like the *x* above, can’t be referenced from other cells; trying to reference an unknown variable will throw a runtime error. However, this error is localized to the broken cell, allowing the rest of the notebook to run happily.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"x + 2 // x is not accessible here!","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`If you want to define a cell as an [object literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals), you must wrap the literal in parenthesis to disambiguate it from a block:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"({top: 20, right: 20, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`To share code between cells without copying and pasting, define a function:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"function greet(person) {\n return `Hello, ${person}!`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`This *greet* function can now be called from other cells to display cheery greetings:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"greet(\"Sue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"greet(\"Bob\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"md`\nDid you note that the greet function above is named in the left margin of the cell? While local variables are not visible across cell boundaries, a the values of a named cell can be reference by other cells. Here’s a cell named *color*:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"color = \"blue\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"`My favorite color is ${color}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"md`(This looks identical to a standard JavaScript assignment, but it’s not—it’s reactive! More on that in a bit.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`By the way - the notebook will track if you define two cells by the same name:` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"status = \"active\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"status = \"pending\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`Here’s another exampe of a named cell, '*letters*':`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"letters = { return \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\"); }","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`You can refer to *letters* (or any other named cell) from other cells:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"letters.map(l => l.toLowerCase())","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`You needn’t define named cells before you reference them: order your cells however you like, and Observable will automatically execute them in topological order. Out-of-order execution is especially helpful for improving the narrative flow of your notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"fullName = `${firstName} ${lastName}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"lastName = \"Lovelace\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"firstName = \"Ada\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"md`A cell that references other cells is re-evaluated automatically whenever the referenced values change. Try editing the *firstName* or *lastName* cell above, then click the play button (\\`▶︎\\`) to commit your change; *fullName* 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"},{"id":118,"value":"randomWalk = {\n let y = 16, values = [y];\n for (let x = 0; x < width; ++x) values.push(y = y + (Math.random() - 0.5) * 3 + (16 - y) * 0.1);\n return values;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"{\n const context = DOM.context2d(width, 33);\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"},{"id":127,"value":"stroke = \"steelblue\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`To understand reactivity, think of each cell as a function. For example, the cell \\`sum = a + b\\` becomes a function that takes *a* and *b* as arguments, returning their sum; the runtime waits for the value of *a* and *b* to resolve and then invokes the *sum* function. The runtime invokes *sum* again whenever *a* or *b* change.\n\nIf a cell contains a \\`yield\\` statement, the runtime creates a generator function instead of a normal function. Likewise if the definition uses \\`await\\`, the runtime creates an async function. Reactivity greatly simplifies how you build user interfaces, script animations, and consume realtime data. We’ll cover dynamic values and other powerful features of Observable in subsequent notebooks. Keep reading to learn about more advanced topics!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`# Working with DOM elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"md`\nAs you've noted in the examples above, cells can generate [DOM](https://www.w3.org/DOM/) elements (HTML, SVG, Canvas, WebGL, *etc.*). If a cell returns a DOM element, that DOM element is displayed as-is, such as when using Observable's built-in tagged template literals:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"html`

I am a paragraph element in an HTML container!

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"md`Of course, my favorite is Markdown, as it supports a variety of styles and structural elements, such as lists and tables. (See [GitHub’s guide to Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/) to learn more.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"md`I am a *paragraph* element rendered from Markdown.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"md`\nAlternatively, one can use the [W3C](https://www.w3.org/) DOM API directly (not that you should—it’s quite verbose):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"{\n const p = document.createElement(\"p\");\n p.appendChild(document.createTextNode(\"I am also a \"));\n p.appendChild(document.createElement(\"i\")).appendChild(document.createTextNode(\"paragraph\"));\n p.appendChild(document.createTextNode(\" element created with the W3C DOM API\"));\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"md`Since all cells in Observable are JavaScript, [tagged template literal](http://exploringjs.com/es6/ch_template-literals.html#_tagged-template-literals) cells can include embeded expressions \\`\\${…}\\` . For example, the number below is randomly generated.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`My favorite number is ${Math.random() * 100 | 0}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`Embedded expressions can also be DOM nodes. This lets you embed dynamic and reactive content, such as little charts or mathematical notation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`I like Markdown for prose, but [${tex`\\KaTeX`}](https://khan.github.io/KaTeX/function-support.html)for math.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"md`Here's a more verbose combination: \n${tex`f(x) = \\int_{-\\infty}^\\infty\n \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\n \\,d\\xi`}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"md`You can also write purely in tex:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"tex`E = mc^2`","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"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":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"md`Or perhaps a fun—a sparkline ${sparkline([0, 8, 3, 2, 6, 5, 1])} (a chart inline with prose), which is defined by the sparkline function cell below.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"function sparkline(values, width = 64, height = 17) {\n const x = d3.scaleLinear().domain([0, values.length - 1]).range([0.5, width - 0.5]);\n const y = d3.scaleLinear().domain(d3.extent(values)).range([height - 0.5, 0.5]);\n const context = DOM.context2d(width, height);\n const line = d3.line().x((d, i) => x(i)).y(y).context(context);\n context.beginPath(), line(values), context.stroke();\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"md`And of course, Markdown can be reactive, too! The \\`now\\` built-in from the Observable [standard library](https://beta.observablehq.com/@mbostock/standard-library) is a reactive variable whose value is the current time. So, embedding a reference to \\`now\\` causes the Markdown to re-evaluate continuously:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`The current time is ${new Date(now).toLocaleTimeString()}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"md`You can manipulate DOM generated from Markdown with JavaScript, say to mix dynamic and static content. The text below cycles through D3’s rainbow scheme.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"{\n const p = md`Less-angry rainbows are the *best* rainbows.`;\n p.style.color = d3.interpolateRainbow(now / 1000);\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`Another common type of dynamic content is [Canvas](https://www.w3.org/TR/2009/WD-html5-20090825/the-canvas-element.html). The standard library method DOM.context2d returns a [CanvasRenderingContext2D](https://www.w3.org/TR/2dcontext/) of the specified width and height (and automatic scaling for high-resolution displays). Draw to the context, and then return the canvas to display it in the notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"{\n const context = DOM.context2d(128, 128);\n for (let radius = 8; radius < 128; radius += 8) {\n context.beginPath();\n context.arc(0, 0, radius, 0, 2 * Math.PI);\n context.stroke();\n }\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"md`Often you’ll use a helper library such as [D3](https://d3js.org) to generate dynamic content. We’ll cover third-party libraries in more detail later in the introduction, but here’s a quick example generating colorful concentric circles in SVG.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"{\n // Create a square

I am a highlighted paragraph.

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"md`Use caution when applying global styles: if a style affects a cell’s height, the runtime won’t notice unless the affected cell is re-evaluated. For example, if you edit the *highlight* cell above to have a font-size of 128px, the highlighted paragraph immediately gets bigger but the following cells aren’t repositioned. Likewise, avoid [floats](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Floats) or remember to clear then!\n\nIf a cell’s height changes, tell the runtime by dispatching an event. Below, the checkbox toggles the height of the cell and dispatches an *update* event to re-layout the following cells.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"{\n let show = false;\n const div = html`

\n \n Show the surprise.\n \n \n

`;\n div.querySelector(\"#toggle\").onclick = () => {\n div.querySelector(\"#surprise\").style.display = (show = !show) ? \"block\" : \"none\";\n div.dispatchEvent(new CustomEvent(\"update\"));\n };\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"md`A cell can return a DOM element that’s already being displayed somewhere else on the page. In this case, the value inspector is used, rather than showing the element inline.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"slider // This slider is already visible above!","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}