2d:null 2e:["$","title",null,{"children":"OpenVis 2018 Exercises | Mike Bostock | Observable"}] 33:[] 31:{"id":"e3fb12ff825deea5","slug":"openvis-2018-exercises","title":"OpenVis 2018 Exercises","thumbnail":"b26792fef3f435e26c555e7d1e9ec6411d6e31a2e62309e9a8ebe829c146ecd5","access_level":"public","create_time":"$D2018-05-12T17:12:39.458Z","update_time":"$D2018-05-19T04:47:31.888Z","view_time":null,"first_public_time":"$D2018-05-16T08:32:03.333Z","has_unpublished_edits":null,"fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":1116,"publish_version":1116,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":48,"collection":null,"type":"notebook","body":{"title":"OpenVis 2018 Exercises","cells":[{"id":0,"value":"md`# OpenVis 2018 Exercises\n\nThis notebook consists of hands-on exercises for learning Observable, ranging from basics of editing to more advanced implementation details. These exercises only cover the fundamentals of Observable—they won’t teach you libraries like D3 or Vega, or visualization techniques—but by mastering these fundamentals you should be better equipped to learn from more advanced examples, such as the [visualization collection](/collection/visualization).\n\nMany of the exercises below include adjacent solutions. Some of these solutions are commented-out and appear as \\`undefined\\`. Using the provided hints, try to write your own solution before consulting the answer. \n\nFork this notebook to begin! [Please ask](https://talk.observablehq.com) if you need help.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Editing\n\nLet’s start by learning the user interface and the basics of editing. Notebooks consist of cells and each *cell* is a snippet of code; the code is evaluated and the resulting value is displayed. Cells can be arbitrary JavaScript, but to start, we’ll write only Markdown using [\\`md\\`](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#md) tagged template literals.\n\nHints: Controls, with the exception of the play button in the top-right corner of each cell editor, live in the left margin. To see the keyboard shortcuts, click on your avatar in the top-right corner and choose Help, or type ? when a cell isn’t focused. See also the [forum thread on keyboard shortcuts](https://talk.observablehq.com/t/list-of-keyboard-shortcuts/89), [Introduction to Notebooks](/@mbostock/introduction-to-notebooks) and [How Saving Works](/@mbostock/how-saving-works).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`Focus this cell and edit this text.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`Pin this cell so that the code remains visible. Then unpin it so the code hides again. Hint: focus this cell first.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`Insert a new cell before or after this cell using the mouse. Hint: focus this cell first.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`Insert a new cell before or after this cell using the keyboard.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`Split this cell: put part of this text in a new cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`Delete this cell! Hint: focus this cell first.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`Merge this cell with the following cell using the mouse.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`Merge this cell with the previous cell using the mouse.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`Merge this cell with the following cell using the keyboard.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`Merge this cell with the previous cell using the keyboard.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`Move the focus to the previous cell without using the mouse.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`Open this cell, then close it without using the mouse.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`Move this cell so that it’s above the previous cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"md`Change the title of this notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"md`Change this notebook’s thumbnail.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"md`How would you share a link to this notebook so that you can get feedback from a colleague before publishing? How would you publish this notebook?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`## Markdown\n\nObservable favors GitHub-flavored Markdown. We won’t cover all the features of Markdown in this workshop, but here are a few useful techniques that go beyond paragraphs of text.\n\nHints: See the [Standard Library](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#markdown) and [Mastering Markdown](https://guides.github.com/features/mastering-markdown/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`Create a new cell with a table.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"md`\n| Name | Symbol | Atomic number |\n|--------|-------------|---------------|\n| Cobalt | Co | 27 |\n| Copper | Cu | 29 |\n| Tin | Sn | 50 |\n| Lead | Pb | 82 |\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"md`Create a new cell with a numbered list.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"md`\n1. This is the first item of the list.\n1. This is the second item.\n1. And this is the third and last.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`Create a new cell showing da Vinci’s [*La Joconde*](https://gist.githubusercontent.com/mbostock/9511ae067889eefa5537eedcbbf87dab/raw/944b6e5fe8dd535d6381b93d88bf4a854dac53d4/mona-lisa.jpg).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"md`Create a cell with a syntax-highlighted JavaScript code block.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"md`\n\\`\\`\\`js\nfunction hello() {\n return \"Bonjour!\";\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`## LaTeX\n\nObservable has built-in support for typesetting mathematical expressions in LaTeX using [\\`tex\\`](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#tex) tagged template literals.\n\nHints: See the [Standard Library](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#tex) and [Function Support in KaTeX](https://khan.github.io/KaTeX/function-support.html).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`Create a new cell using LaTeX.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"tex`E = mc^2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"md`Create a new cell containing a LaTeX block.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"tex.block`\nf(x) = \\int_{-\\infty}^\\infty\n \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\n \\,d\\xi\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"md`Create a Markdown cell that embeds LaTeX, like this: ${tex`E = mc^2`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`## JavaScript\n\nObservable (currently) only has one type of cell: “Markdown cells” and “LaTeX cells” are just JavaScript cells with the corresponding tagged template literal. Now let’s consider how to write more general code in notebooks.\n\nHints: Read the [Five-Minute Introduction](/@mbostock/five-minute-introduction), [Introduction to Code](/@mbostock/introduction-to-code), [Introduction to Require](/@tmcw/introduction-to-require) and [Template literals](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals). For more technical details, see [How Observable Runs](/@mbostock/how-observable-runs).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`The cell below has a random number. Run the cell again using the mouse. What happens to the number? Then run it again using the keyboard.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"Math.random()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`The cell below defines *x*. Edit this cell to display the value of *x*: _.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"x = 42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"md`Change the value of *x*. What happens to the display cell above? Why? What happens when you evaluate a named cell?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`The cell below is broken. Fix it by creating a new cell defining *y*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`The value of *y* is: ${y}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"// y = \"yes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"md`Digression: Is the cell that defines *x* above an [assignment](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Assignment_Operators)? What would happen if more than one cell defines the value of *x*? What happens if you try to assign to the value of *x*? Why? (See [Introduction to Mutable State](/@jashkenas/introduction-to-mutable-state) for a related intermediate technique.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"// x = 12 // Uncomment to create a duplicate definition of x.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"// { x = 12; } // Uncomment to assign to x.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`How would you compute the value of ${tex`\\sin 45^\\circ`}?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"Math.sin(45 * Math.PI / 180)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`How would you compute the sum of the integers from 0 to 99 (without using the closed formula of Gauss)?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"{\n let sum = 0;\n for (let i = 1; i < 100; ++i) {\n sum += i;\n }\n return sum;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"md`Why is the cell below invalid syntax? How would you fix it?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"var z = 13;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"md`Write a function *f* that returns a random integer between 0 and *n* - 1.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"function f(n) {\n return Math.floor(Math.random() * n);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md`Call the function *f*, passing in *n* = 100.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"f(100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`Define an object *o* where *o*.foo = *x*, and *o*.bar is a string.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"o = ({foo: x, bar: \"🤔\"}) // Parens are needed to disambiguate from blocks.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"md`Show the value of *o.*bar.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"o.bar","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"md`Digression: Why would assigning to *o*.bar lead to nondeterministic behavior?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"md`Define an array *a* containing a few strings.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"a = [\"red\", \"green\", \"blue\"] // Parens are not needed for arrays.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"md`Create a cell whose text is the color of *a*[0], like this one.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"md`Create a cell listing the values of *a*: ${a.join(\", \")}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"md`Define a second array *b*, [mapped](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) from *a*, containing objects whose *name* and *index* properties correspond to *a*[*i*] and *i* respectively.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"b = a.map((d, i) => ({name: d, index: i}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"md`Derive a third array *c* from *a* that is sorted lexicographically.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"c = a.slice().sort() // Don’t forget to slice; sort mutates!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"md`Load the D3 library, then [format the number](https://github.com/d3/d3-format/blob/master/README.md#locale_format) one million using SI-prefix notation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"d3.format(\"~s\")(1e6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md`Focus the cell below, then use autocomplete (hit Tab) to choose a D3 API.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"// Complete me!\nd3.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`## Data\n\nHints: See [Introduction to Promises](/@mbostock/introduction-to-promises), [Introduction to Data](/@mbostock/introduction-to-data) and the [example datasets](https://github.com/observablehq/datasets).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"md`Load the *aapl* example dataset.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"aapl = require(\"@observablehq/aapl\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"md`Compute the time and value extents of the *aapl* dataset.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"d3.extent(aapl, d => d.date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"d3.extent(aapl, d => d.close)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"md`What happens if you try to run the two cells above before the *aapl* data is loaded? (Or for that matter, before *d3* is loaded?)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"// It’s a trick question: you can’t! The cells reference aapl, so they wait until aapl resolves. This is true regardless of the order of cells in the notebook because Observable runs cells in topological rather than top-down order.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"md`Load a JSON file (*e.g.*, [flare.json](https://github.com/d3/d3-hierarchy/blob/master/test/data/flare.json)) using the Fetch API.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"fetch(\"https://raw.githubusercontent.com/d3/d3-hierarchy/v1.1.6/test/data/flare.json\").then(response => response.json()) // Pin the version instead of referencing master for stability.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"md`Load flare.json into a [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy), and then return the leaves as an array.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"{\n const response = await fetch(\"https://raw.githubusercontent.com/d3/d3-hierarchy/v1.1.6/test/data/flare.json\");\n const json = await response.json();\n return d3.hierarchy(json).leaves();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"md`Load a CSV file (*e.g.*, [aapl.csv](https://github.com/matplotlib/sample_data/blob/master/aapl.csv)) using d3-fetch.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"d3.csv(\"https://raw.githubusercontent.com/matplotlib/sample_data/d6f31b58902699da19d640d3b4cc15b272449d1a/aapl.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"md`Load a CSV file using d3-fetch, while coercing numbers and parsing dates.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"{\n const parseDate = d3.timeParse(\"%Y-%m-%d\");\n return d3.csv(\"https://raw.githubusercontent.com/matplotlib/sample_data/d6f31b58902699da19d640d3b4cc15b272449d1a/aapl.csv\", d => ({\n date: parseDate(d[\"Date\"]),\n open: +d[\"Open\"],\n high: +d[\"High\"],\n low: +d[\"Low\"],\n close: +d[\"Close\"],\n closeAdjusted: +d[\"Adj Close\"],\n volume: +d[\"Volume\"]\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"md`Compute the daily relative change for the *aapl* dataset.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"aapl_change = d3.pairs(aapl, ({close: c0}, {date, close: c1}) => ({date, change: (c1 - c0) / c0}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`Display the best ten days for Apple (in this dataset) in a table.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"{\n const changes = aapl_change.slice().sort((a, b) => b.change - a.change);\n const bestTen = changes.slice(0, 10).sort((a, b) => a.date - b.date);\n const formatDate = d3.timeFormat(\"%B %-d, %Y\");\n const formatChange = d3.format(\"+.1%\");\n return md`\n| Date | Change |\n|---------------------|-------------------------|${bestTen.map(({date, change}) => `\n| ${formatDate(date)} | ${formatChange(change)} |`)}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"md`Load the *Mona Lisa* again, but in a way that allows access to pixel data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"image = d3.image(\"https://gist.githubusercontent.com/mbostock/9511ae067889eefa5537eedcbbf87dab/raw/944b6e5fe8dd535d6381b93d88bf4a854dac53d4/mona-lisa.jpg\", {crossOrigin: \"anonymous\"}).then(image => {\n const context = DOM.context2d(image.width, image.height, 1);\n context.drawImage(image, 0, 0);\n return context.getImageData(0, 0, image.width, image.height);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`## HTML\n\nHints: See [Introduction to HTML](/@mbostock/introduction-to-html).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"p = html`

Create a cell, like this one, by writing HTML instead of Markdown.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"md`What happens if you reference a DOM element defined in another cell? Why?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"// p","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"md`Digression: Why might modifying a DOM element defined by another cell lead to nondeterministic behavior? Why would it be a bad idea to select through the DOM?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"// p.style.color = \"blue\" // Uncomment this to mutate p.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`Create a function that returns a cheerful greeting to the specified *subject* as a DOM text node or paragraph.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"greet(\"Fred\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"// function greet(subject) {\n// return md`Hello, ${subject}!`;\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"md`## SVG\n\nHints: See [Introduction to HTML](/@mbostock/introduction-to-html).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"md`Display a circle using SVG.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"md`Display some randomly-positioned (rainbow optional) dots using SVG.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"{\n const random = d3.randomNormal(0, 60);\n return html`\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"md`## Canvas\n\nHints: See [Introduction to HTML](/@mbostock/introduction-to-html).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"md`Display a circle using Canvas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"{\n const context = DOM.context2d(48, 48);\n context.fillStyle = \"blue\";\n context.beginPath();\n context.arc(24, 24, 24, 0, 2 * Math.PI);\n context.fill();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"md`Draw some randomly-positioned dots using Canvas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"{\n const random = d3.randomNormal(0, 60);\n const context = DOM.context2d(320, 320);\n context.translate(160, 160);\n for (let i = 0; i < 500; ++i) {\n const x = random(), y = random();\n context.fillStyle = d3.interpolateSinebow(Math.atan2(y, x) / (2 * Math.PI));\n context.beginPath();\n context.arc(x, y, 2, 0, 2 * Math.PI);\n context.fill();\n }\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"md`## WebGL\n\nJust kidding!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"md`## D3\n\nHints: See [Introduction to HTML](/@mbostock/introduction-to-html) and [Thinking with Joins](https://bost.ocks.org/mike/join/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"md`Draw some randomly-positioned dots using D3 and SVG.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"{\n const random = d3.randomNormal(0, 60);\n\n const svg = d3.select(DOM.svg(320, 320));\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(160,160)`)\n .selectAll(\"circle\")\n .data(d3.range(500).map(i => [random(), random()]))\n .enter().append(\"circle\")\n .attr(\"cx\", ([x, y]) => x)\n .attr(\"cy\", ([x, y]) => y)\n .attr(\"r\", 2)\n .attr(\"fill\", ([x, y]) => d3.interpolateSinebow(Math.atan2(y, x) / (2 * Math.PI)));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"md`## Generators\n\nHints: See [Introduction to Generators](/@mbostock/introduction-to-generators) and [Introduction to Asynchronous Iteration](/@mbostock/introduction-to-asynchronous-iteration).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"md`Define a value that increments sixty times a second.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"{\n for (let i = 0; true; ++i) {\n yield i;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"md`Define a value *seconds* that increments once per second.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"seconds = {\n for (let i = 0; true; ++i) {\n yield Promises.tick(1000, i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"md`What happens when you reference *seconds* in a cell?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"// md`${seconds} seconds have elapsed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"md`Draw points using Canvas, drawing ten points per frame.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"{\n const theta = Math.PI * (3 - Math.sqrt(5));\n const context = DOM.context2d(320, 320);\n context.translate(160, 160);\n for (let i = 0; i < 5000; ++i) {\n const radius = 4 * Math.sqrt(i);\n const angle = i * theta;\n const x = radius * Math.cos(angle);\n const y = radius * Math.sin(angle);\n context.fillStyle = d3.interpolateRainbow(angle / (2 * Math.PI));\n context.beginPath();\n context.arc(x, y, 2, 0, 2 * Math.PI);\n context.fill();\n if (i % 10 === 0) yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"md`How do you adapt an iterable, such as an array of numbers, to a value that changes over time (a generator)?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"array = d3.range(100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"// yield* array","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"md`Define a value *t* that oscillates smoothly between 0 and 1 every second.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"t = (Math.sin(now / 1000) + 1) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"md`What happens when you reference *t* in a LaTeX cell?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"// tex`t = ${t.toFixed(6)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"md`Using *t*, animate a circle that swings back and forth.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"md`Use a web socket to stream bitcoin transactions in realtime.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"Generators.observe(notify => {\n const socket = new WebSocket(\"wss://ws.blockchain.info/inv\");\n socket.onerror = () => notify(Promise.reject(new Error(\"socket error\")));\n socket.onopen = () => socket.send(JSON.stringify({op: \"unconfirmed_sub\"}));\n socket.onmessage = event => notify(JSON.parse(event.data));\n return () => socket.close();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"md`## Inputs\n\nHints: See [Introduction to Generators](/@mbostock/introduction-to-generators) and [A Brief Introduction to Viewof](/@mbostock/a-brief-introduction-to-viewof).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"md`Given an HTML input element:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"input = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"md`Display the input’s current value (the hard way).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"{\n // Yield the first value.\n yield input.valueAsNumber;\n\n // Resolve the current promise on an input event.\n let resolve, inputted = () => resolve(input.valueAsNumber);\n input.addEventListener(\"input\", inputted);\n\n // Yield a new promise every time one resolves.\n // Note: this can drop some events!\n try {\n while (true) yield new Promise(_ => resolve = _);\n } finally {\n input.removeEventListener(\"input\", inputted);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"md`Display the input’s current value using [Generators.observe](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#Generators_observe).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"Generators.observe(notify => {\n\n // Yield the first value.\n notify(input.valueAsNumber);\n\n // Yield the new value on an input event.\n const inputted = () => notify(input.valueAsNumber);\n\n // Attach the event listener.\n input.addEventListener(\"input\", inputted);\n\n // Detach the event listener when the generator is disposed.\n return () => input.removeEventListener(\"input\", inputted);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"md`Display the input’s current value using [Generators.input](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#Generators_input).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"Generators.input(input)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"md`Create an input and display its current value using viewof.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"viewof value = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1019,"value":"md`Create a text input and display its current value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"viewof text = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"text","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"md`How would you combine multiple inputs into a single view? Hint: What does [Generators.input](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#Generators_input) expect of its *input* element?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"viewof rgb = {\n const form = html`

`;\n form.oninput = () => form.value = d3.rgb(form.r.value, form.g.value, form.b.value);\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"rgb","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"md`Load a CSV file from disk.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"viewof file = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"d3.csvParse(await Files.text(file), ({id, value}) => ({id, value: +value}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"md`## Imports\n\nHints: See [Introduction to Imports](/@mbostock/introduction-to-imports).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"