2c:null 2d:["$","title",null,{"children":"Demo | Xing Li | Observable"}] 32:T416,md`Observable notebooks consist of [JavaScript cells](/@observablehq/introduction-to-code). You can view the code for any cell by clicking in the left margin, or by clicking **Edit** in the cell menu . (The cells below are pinned open, so their source is already visible.) After editing, hit Shift-Enter or click the cell’s play button to run the code.`33:[] 30:{"id":"6393e4e3765605a4","slug":"demo","title":"Demo","thumbnail":"671ac3f924549d05d0680dc4d276ec16385ac2662c097044d34b8b50a284f3bf","access_level":"public","create_time":"$D2020-08-11T13:59:09.341Z","update_time":"$D2020-08-11T14:17:37.571Z","view_time":null,"first_public_time":"$D2020-08-11T13:59:20.477Z","has_unpublished_edits":null,"fork":{"id":"8e6e97112bddde8a","slug":"demo","title":"Demo","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"37533a4ea4d6662e","login":"lixing","name":"Xing Li","avatar_url":"https://avatars-next.observableusercontent.com/1f21fc0fa95bed0d07cbf426d18015f1adccd82533294cb8a9e556e43db6143e","tier":"starter_2024"},"version":308,"publish_version":308,"role":null,"authored":false,"authors":[{"type":"individual","id":"9c50929b51577d7b","login":"lixing","name":"Xing Li","avatar_url":"https://avatars-next.observableusercontent.com/1f21fc0fa95bed0d07cbf426d18015f1adccd82533294cb8a9e556e43db6143e","tier":null}],"members":[{"type":"individual","id":"9c50929b51577d7b","login":"lixing","name":"Xing Li","avatar_url":"https://avatars-next.observableusercontent.com/1f21fc0fa95bed0d07cbf426d18015f1adccd82533294cb8a9e556e43db6143e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Demo","cells":[{"id":0,"value":"md`# Demo\n\nTry editing this code to learn how Observable works!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"1 + 1 // Edit me!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"md`For more complex definitions such as loops, hug your code with curly braces \\`{…}\\`. Whatever value you return is shown.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"{\n let sum = 0;\n for (let i = 0; i < 100; ++i) {\n sum += i;\n }\n return sum;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`A cell can have a name, allowing its value to be referenced by other cells. A referencing cell is [run automatically](/@observablehq/how-observable-runs) when the referenced value changes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"color = \"red\" // Edit me!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"`My favorite color is ${color}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"md`You can inspect nested values such as objects and arrays by clicking on them, just like in your browser’s developer console.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"object = ({open: [atob(\"c2VzYW1l\")]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`Cells can [generate DOM elements](/@observablehq/introduction-to-html), such as HTML, SVG, Canvas and WebGL. You can use the DOM API, or our HTML and Markdown template literals.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"html`\n My favorite language is HTML.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`Hi Mom! It’s me, *Markdown*.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`DOM can be made reactive simply by referring to other cells. The next cell refers to *color*, and will update if you change the definition of *color* above.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"html`My favorite color is ${color}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`You can [load data](/@observablehq/introduction-to-data) by [attaching files](/@observablehq/file-attachments) or using the Fetch API.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"cars = fetch(\"https://raw.githubusercontent.com/vega/vega/v4.3.0/docs/data/cars.json\")\n .then(response => response.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`You can [load libraries](/@tmcw/introduction-to-require) from npm.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"d3 = require(\"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`If a cell’s value is a [promise](/@observablehq/introduction-to-promises), any referencing cell implicitly awaits it. Both \\`fetch\\` and \\`require\\` return promises, but the cell below can refer simply to their eventual values. (You can explicitly \\`await\\`, too.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"d3.median(cars, d => d.Horsepower)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`Define a function cell to reuse code.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"function greet(subject) {\n return `Hello, ${subject}!`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"greet(\"world\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`Cells can be [generators](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators), yielding values up to sixty times a second. A cell that refers to a generator cell runs automatically whenever the generator yields a new value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"c = {\n for (let i = 0; true; ++i) {\n yield i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`Currently, *c* = ${c}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`You can yield DOM elements for animation. Click the play button in the top-right corner of the cell below to restart the animation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"{\n const height = 33;\n const context = DOM.context2d(width, height);\n for (let i = 0; i < width; ++i) {\n const t = i / width;\n const r = Math.floor(255 * Math.sin(Math.PI * (t + 0 / 3)) ** 2);\n const g = Math.floor(255 * Math.sin(Math.PI * (t + 1 / 3)) ** 2);\n const b = Math.floor(255 * Math.sin(Math.PI * (t + 2 / 3)) ** 2);\n context.fillStyle = `rgb(${r},${g},${b})`;\n context.fillRect(i, 0, 1, height);\n yield context.canvas;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`Use [asynchronous iteration](/@observablehq/introduction-to-asynchronous-iteration) to control when the cell’s value changes. The cell below ticks every second, on the second.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"tick = {\n while (true) {\n const date = new Date(Math.ceil(Date.now() / 1000) * 1000);\n await Promises.when(date);\n yield date;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`Asynchronous iteration works for interaction, too. Here’s a slider and a generator that yields a promise whenever you change the slider’s value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"slider = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"sliderValue = Generators.input(slider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`Use [views](/@observablehq/introduction-to-views) as shorthand to define interactive values. The cell below defines both a graphical user interface to control a value (another slider), and an implicit generator that exposes this value to the notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"viewof d = html`` // Edit me! Try type=text.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`Currently, *d* = ${d}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`Reuse code by [importing cells](/@observablehq/introduction-to-imports) from other notebooks!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"tweet(\"958726175123128321\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"