31:[] 2f:{"title":"Standard Library","cells":[{"id":1,"value":"md`# Standard Library\n\n

\n\nA cheatsheet for the Observable standard library.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## DOM \n\ncreate HTML and SVG elements.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"DOM // Expand me!","pinned":true,"hidden":false,"mode":"ojs"},{"id":662,"value":"md`### ${code('DOM.canvas')} for WebGL\n\n\\`DOM.canvas(width, height)\\`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"{\n const context = DOM.context2d(width, 33);\n context.fillText(\"Hello, I am a canvas!\", 0, 20);\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"DOM.download(\n new Blob([JSON.stringify({hello: \"world\"})], {type: \"application/json\"}),\n \"hello.json\", // optional file name\n \"Click to Download\" // optional button label\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":591,"value":"{\n const clip = DOM.uid(\"clip\");\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`## HTML`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"html`I am a text node.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"// DOM.text is useful for escaping strings to be inserted in HTML.\nDOM.text(\"I am a text node.\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"html`This is escaped: ${DOM.text(\"Hello!\")}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"html`\n Hello, world!\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":580,"value":"md`## SVG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":583,"value":"md`## Markdown`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`Hello, I am *Markdown*!`","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"md`The current time is ${new Date(now).toLocaleString()}.` // Reactive Markdown!","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"md`## LaTeX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"tex`E = mc^2`","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"tex`\nf(x) = \\int_{-\\infty}^\\infty\n \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\n \\,d\\xi\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":513,"value":"tex.block`\nf(x) = \\int_{-\\infty}^\\infty\n \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\n \\,d\\xi\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`## Files`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"Files // Expand me!","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"viewof file = html`` // Try opening a file.","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"Files.buffer(file)","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"Files.text(file)","pinned":true,"hidden":false,"mode":"ojs"},{"id":376,"value":"Files.url(file)","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`## Generators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"Generators // Expand me!","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"function* integers() {\n let i = -1;\n while (true) {\n yield ++i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":669,"value":"// integers()","pinned":true,"hidden":false,"mode":"ojs"},{"id":623,"value":"input = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"// Consider using viewof instead.\ninputValue = Generators.input(input)","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"// Consider using Generators.input or viewof instead.\n// Like Generators.queue, except it yields only the latest notified value.\nGenerators.observe(notify => {\n const mousemoved = event => notify([event.clientX, event.clientY]);\n window.addEventListener(\"mousemove\", mousemoved);\n return () => window.removeEventListener(\"mousemove\", mousemoved);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"// Consider using Generators.input or viewof instead.\n// Like Generators.observe, except it yields all notified values.\nGenerators.queue(notify => {\n const mousemoved = event => notify([event.clientX, event.clientY]);\n window.addEventListener(\"mousemove\", mousemoved);\n return () => window.removeEventListener(\"mousemove\", mousemoved);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`## Promises`","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"Promises // Expand me!","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"// Consider also Promises.tick.\nPromises.delay(5000, \"resolved value\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"// Like Promises.delay, but synchronized.\nPromises.tick(1000, \"resolved value\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"{\n while (true) {\n yield Promises.tick(1000).then(() => new Date);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"{\n // A somewhat elaborate variation of Promises.delay.\n const date = new Date;\n date.setSeconds(date.getSeconds() + 1);\n return Promises.when(date, \"resolved value\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`## require`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":472,"value":"topojson = require(\"topojson-client\", \"topojson-simplify\") // Merge libraries!","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"require(\"https://unpkg.com/d3@5/dist/d3.min.js\") // URLs work, too.","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"require.resolve(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"md`## Reactive Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"{\n let i = 0;\n const div = html`

`;\n const timer = d3.timer(() => div.textContent = ++i);\n invalidation.then(() => timer.stop()); // Stop if re-evaluated.\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"now // Date.now()","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"width // Try resizing the window.","pinned":true,"hidden":false,"mode":"ojs"},{"id":666,"value":"import {code} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}