28:null 29:["$","title",null,{"children":"Demo | Can Burak S. | Observable"}] 2e: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.`2f:[] 2c:{"id":"0b8406f53a7f0298","slug":"demo","title":"Demo","thumbnail":"c1f08c9e6e1aa3581441a522d52f5ecb362a7e0951d8dcdb67fb56796318c11f","access_level":"public","create_time":"$D2020-09-25T23:08:17.849Z","update_time":"$D2020-09-25T23:09:13.461Z","view_time":null,"first_public_time":"$D2020-09-25T23:08:26.435Z","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":"b2c4faabc9cec8ad","login":"canburaks","name":"Can Burak S.","avatar_url":"https://avatars-next.observableusercontent.com/5f5c73371968425fe498448e0e9f9fca4ac90e7254499fe08bdfd8b4d580cbb7","tier":"starter_2024"},"version":313,"publish_version":313,"role":null,"authored":false,"authors":[{"type":"individual","id":"b444bdf55a1c9e2f","login":"canburaks","name":"Can Burak S.","avatar_url":"https://avatars-next.observableusercontent.com/5f5c73371968425fe498448e0e9f9fca4ac90e7254499fe08bdfd8b4d580cbb7","tier":null}],"members":[{"type":"individual","id":"b444bdf55a1c9e2f","login":"canburaks","name":"Can Burak S.","avatar_url":"https://avatars-next.observableusercontent.com/5f5c73371968425fe498448e0e9f9fca4ac90e7254499fe08bdfd8b4d580cbb7","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":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"5 +5 \n\n\n","pinned":true,"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":false,"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":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"