30: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.`31:[] 2e:{"title":"Demo","cells":[{"id":0,"value":"md`# Demo\n\nTry editing this code to learn how Observable works!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"1 + 1 // Edit me!","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":6,"value":"color = \"red\" // Edit me!","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"`My favorite color is ${color}.`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":229,"value":"object = ({open: [atob(\"c2VzYW1l\")]})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":84,"value":"html`\n My favorite language is HTML.\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"md`Hi Mom! It’s me, *Markdown*.`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":97,"value":"html`My favorite color is ${color}.`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":102,"value":"md`You can [load libraries](/@tmcw/introduction-to-require) from npm.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"he = require(\"he@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":330,"value":"he.encode(\"foo © bar ≠ baz 𝌆 qux\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`Define a function cell to reuse code.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"function greet(subject) {\n return `Hello, ${subject}!`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"greet(\"world\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":24,"value":"c = {\n for (let i = 0; true; ++i) {\n yield i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`Currently, *c* = ${c}.`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":158,"value":"slider = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"sliderValue = Generators.input(slider)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":33,"value":"viewof d = html`` // Edit me! Try type=text.","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`Currently, *d* = ${d}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`Reuse code by [importing cells](/@observablehq/introduction-to-imports) from other notebooks!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"tweet(\"958726175123128321\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}