31:T402,md` ${headerLink(1, "https://observablehq.com/@embracelife/tutorial-utilities", "Tutorial-Utilities")} How to create utility functions to use everywhere in Observable notebooks --- ## Array.prototype.methods - [Array.prototype.concat](#concat) ## View and bind - [View and bind](#View) ## p5 Utils - [P5: loading p5js library](#P5) - [p5: P5 configured for Observable](#p5) ## d3 Utils - [d3 development](#d3) ## React Utils - [r: require both reactjs and react-dom](#r) - [React: load react](#React) - [ReactDOM: load react-dom](#ReactDOM) - [htm: load htm and bind with React.createElement](#htm) ## General Utils - [anchorLink(url, text): embed a url and click to open a new tab](#anchorLink) - [stylesheet: set your own styles](#stylesheet) - [videoyt(url, w, h): embed youtube videos](#videoyt) - [webpage(w, h, url): embed a proper webpage](#webpage) - [code: highlight inline variables](#code) - [key: highlight keys](#key) ## Obs stdlib - [html](#html) - [md](#md) - [template](#template) - [width](#width) `32:T8dd,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }33:T680, // import marked from "marked"; md = { const HL_ROOT = "https://cdn.jsdelivr.net/npm/@observablehq/highlight.js@2.0.0/"; let md_func = function (require) { // use require because we need it to load libraries return function() { return template( function(string) { var root = document.createElement("div"); root.innerHTML = marked(string, { langPrefix: "" }).trim(); var code = root.querySelectorAll("pre code[class]"); if (code.length > 0) { require(HL_ROOT + "highlight.min.js").then(function(hl) { code.forEach(function(block) { function done() { hl.highlightBlock(block); block.parentNode.classList.add("observablehq--md-pre"); } if (hl.getLanguage(block.className)) { done(); } else { require(HL_ROOT + "async-languages/index.js") .then(index => { if (index.has(block.className)) { return require(HL_ROOT + "async-languages/" + index.get(block.className)).then(language => { hl.registerLanguage(block.className, language); }); } }) .then(done, done); } }); }); } return root; }, function() { return document.createElement("div"); } ); }; } // return md_func; return md_func(require)(); }34:T834,template = { return function template(render, wrapper) { return function(strings) { var string = strings[0], parts = [], part, root = null, node, nodes, walker, i, n, j, m, k = -1; // Concatenate the text using comments as placeholders. for (i = 1, n = arguments.length; i < n; ++i) { part = arguments[i]; if (part instanceof Node) { parts[++k] = part; string += ""; } else if (Array.isArray(part)) { for (j = 0, m = part.length; j < m; ++j) { node = part[j]; if (node instanceof Node) { if (root === null) { parts[++k] = root = document.createDocumentFragment(); string += ""; } root.appendChild(node); } else { root = null; string += node; } } root = null; } else { string += part; } string += strings[i]; } // Render the text. root = render(string); // Walk the rendered content to replace comment placeholders. if (++k > 0) { nodes = new Array(k); walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT, null, false); while (walker.nextNode()) { node = walker.currentNode; if (/^o:/.test(node.nodeValue)) { nodes[+node.nodeValue.slice(2)] = node; } } for (i = 0; i < k; ++i) { if (node = nodes[i]) { node.parentNode.replaceChild(parts[i], node); } } } // Is the rendered content // … a parent of a single child? Detach and return the child. // … a document fragment? Replace the fragment with an element. // … some other node? Return it. return root.childNodes.length === 1 ? root.removeChild(root.firstChild) : root.nodeType === 11 ? ((node = wrapper()).appendChild(root), node) : root; }; } }35:T53a,function* p5(sketch) { const element = DOM.element('div'); // p5.js really likes its target element to already be in the DOM, not just // floating around detached. So, before we call P5, we yield it, which puts // in the DOM. // debugger; yield element; // This is ‘instance mode’ in p5 jargon: instead of relying on lots of // globals, we create a sketch that has its own copy of everything under p5. const instance = new P5(sketch, element, true); // inside this construction function, `sketch(this)` is executed, this is why inside sketch closure, sketch refers to p5 too. (debugging and then search sketch inside p5.js source code) // This is the tricky part: when you run P5(sketch, element), it starts a // loop that updates the drawing a bunch of times a second. If we were just // to call P5 repeatedly with different arguments, the loops would all keep // running, one on top of the other. So what we do is we use this cell // as a generator, and then when that generator is interrupted, like // when you update the code in the sketch() method, then we call instance.remove() // to clean it up. try { while (true) { // keep drawing a new div yield element; } } finally { instance.remove(); // when the sketch-code is changed, this line will be triggered } }36:T68e,seriesNavigation = active => { const svgPath = "M12 21c-1.108 0-2.068-.261-2.88-.783a5.137 5.137 0 0 1-1.867-2.126 11.821 11.821 0 0 1-.952-2.847A16.523 16.523 0 0 1 6 12c0-.862.052-1.686.157-2.474.104-.787.297-1.587.578-2.399.281-.812.643-1.516 1.084-2.113a4.987 4.987 0 0 1 1.735-1.455C10.27 3.186 11.084 3 12 3c1.108 0 2.068.261 2.88.783a5.137 5.137 0 0 1 1.867 2.126c.434.895.751 1.844.952 2.847.2 1.002.301 2.084.301 3.244 0 .862-.052 1.686-.157 2.474a11.76 11.76 0 0 1-.59 2.399c-.29.812-.65 1.516-1.084 2.113-.434.597-1.008 1.082-1.723 1.455-.715.373-1.53.559-2.446.559zm2.118-6.882A2.888 2.888 0 0 0 15 12c0-.824-.287-1.53-.86-2.118C13.566 9.294 12.853 9 12 9c-.853 0-1.566.294-2.14.882A2.925 2.925 0 0 0 9 12c0 .824.287 1.53.86 2.118.574.588 1.287.882 2.14.882.853 0 1.559-.294 2.118-.882zM12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z"; function i(n, url, name) { return html`${n} ${name}`; } return html`

Tutorials ${i( 1, "tutorial-1-lunch-calculator", "Lunch calculator" )} ${i(2, "tutorial-2-dog-pictures", "Dog pictures")} ${i(3, "tutorial-3-visualizing-data", "Visualizing data")}

`; }37:[] 2f:{"title":"Tutorial-Utilities","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"md`## React UI for notebooks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"none_doc = [\"none\", \"doc\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"function hide_display(option, doc) {\n if (option === \"none\") {\n return md``;\n } else {\n return doc;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"md`## View and bind`","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"viewof x = new View(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"x","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"bind(html``, viewof x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"bind(html``, viewof x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"import {View, bind} from \"@mbostock/synchronized-views\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"md`## Inputs\n\ncopied from https://observablehq.com/@jashkenas/inputs\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"md `## Color`","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"viewof c = color()","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"viewof c1 = color({\n value: \"#0000ff\",\n title: \"Background Color\",\n description: \"This color picker starts out blue\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"function color(config = {}) {\n const {\n value = \"#000000\", title, description, submit, display\n } = typeof config === \"string\" ? {value: config} : config;\n const form = input({\n type: \"color\", title, description, submit, display,\n attributes: {value}\n });\n if (title || description) form.input.style.margin = \"5px 0\";\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"md`## Button`","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"viewof b = button()","pinned":true,"hidden":false,"mode":"ojs"},{"id":533,"value":"{\n b // auto update this block from clicking the button above\n return !this;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"viewof b1 = button({value: \"Click me\", description: \"We use a reference to the button below to record the time you pressed it.\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"{\n b1;\n return new Date(Date.now()).toUTCString()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"function button(config = {}) {\n const {\n value = \"Ok\", title, description, disabled\n } = typeof config === \"string\" ? {value: config} : config;\n const form = input({\n type: \"button\", title, description,\n attributes: {disabled, value}\n });\n form.output.remove();\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":514,"value":"md`### Slider`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"viewof a2 = slider({\n min: 0,\n max: 1e9,\n step: 1000,\n value: 3250000,\n format: \",\",\n description:\n \"Zero to one billion, in steps of one thousand, formatted as a (US) number\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"viewof a1_1 = slider({\n min: 0, \n max: 1, \n step: 0.01, \n format: v => `${Math.round(100 * v)} per cent`,\n description: \"Zero to one, formatted with a custom function\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"viewof a1 = slider({\n min: 0, \n max: 1, \n step: 0.01, \n format: \".0%\",\n description: \"Zero to one, formatted as a percentage\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":517,"value":"viewof a3 = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 10, \n title: \"Integers\", \n description: \"Integers from zero through 100\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":512,"value":"viewof a5 = slider({\n min: 0.9,\n max: 1.1,\n precision: 3,\n submit: true,\n description: \"The same as a4, but only changes value on submit\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":506,"value":"function slider(config = {}) {\n let {\n min = 0, max = 1, value = (max + min) / 2, step = \"any\", precision = 2,\n title, description, getValue, format, display, submit,\n } = typeof config === \"number\" ? {value: config} : config;\n precision = Math.pow(10, precision);\n if (!getValue) getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\", title, description, submit, format, display,\n attributes: {min, max, step, value},\n getValue\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"d3format = require(\"d3-format@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"md `## Obs stdlib`","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"DOM.context2d(300, 150).canvas","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"DOM = ({context2d})","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"context2d = function(width, height, dpi) {\n // https://github.com/observablehq/stdlib/blob/master/src/dom/context2d.js\n if (dpi == null) dpi = devicePixelRatio;\n var canvas = document.createElement(\"canvas\");\n canvas.width = width * dpi;\n canvas.height = height * dpi;\n canvas.style.width = width + \"px\";\n var context = canvas.getContext(\"2d\");\n context.scale(dpi, dpi);\n return context;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"constant = function(x) {\n return function() {\n return x;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"md `### md`","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"marked = require(\"marked\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"md `### width\n${anchorLink(\"https://github.com/observablehq/stdlib/blob/master/src/width.js\", \"width.js source\")}\n\nsee [library.js](https://github.com/observablehq/stdlib/blob/master/src/library.js#L22) for how \\`width\\` is delivered\n\nUnderstand the why ${anchorLink(\"https://talk.observablehq.com/t/why-need-constant-when-implementing-html-of-stdlib-in-a-notebook/2464/2\", \"here\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"width = (function width() {\n return observe(function(change) {\n var width = change(document.body.clientWidth);\n function resized() {\n var w = document.body.clientWidth;\n if (w !== width) change(width = w);\n }\n window.addEventListener(\"resize\", resized);\n return function() {\n window.removeEventListener(\"resize\", resized);\n };\n });\n})()","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"observe = function(initialize) {\n let stale = false;\n let value;\n let resolve;\n const dispose = initialize(change);\n\n function change(x) {\n if (resolve) resolve(x), resolve = null;\n else stale = true;\n return value = x;\n }\n\n function next() {\n return {done: false, value: stale\n ? (stale = false, Promise.resolve(value))\n : new Promise(_ => (resolve = _))};\n }\n\n return {\n [Symbol.iterator]: that,\n throw: () => ({done: true}),\n return: () => (dispose != null && dispose(), {done: true}),\n next\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"that = function that() {\n return this;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"md `### html`","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"{\n debugger;\n html`hello` // check to see whether it is my html or the builtin html\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":440,"value":"html = template(function(string) {\n var template = document.createElement(\"template\");\n template.innerHTML = string.trim();\n return document.importNode(template.content, true);\n }, function() {\n return document.createElement(\"span\");\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":441,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"md`## p5 Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"P5 = require('https://unpkg.com/p5@0.6.0/lib/p5.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"md `## d3 Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"d3 = require(\"https://cdn.jsdelivr.net/npm/d3@5.12.0/dist/d3.js\") ","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"d3_min = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"md` ## React Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"r = require.alias({\n react: \"react@16/umd/react.development.js\",\n \"react-dom\": \"react-dom@16/umd/react-dom.development.js\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"React = r(\"react\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"ReactDOM = r(\"react-dom\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"htm = import('https://unpkg.com/htm@2?module').then(r => r.default.bind(React.createElement)) // no development version is available","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"md `---\n## general utils`","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"stylesheet=html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"html`cells`","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"md`\n## Create style \n\n${\nhtml`cells`}\n\n\\`console.log\\`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"step1 = md` ### Create a header with anchor link`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"headerLink = (level, url, text) => {\n if (url === \"\") {\n return html`${text}`\n } else {\n return html`${anchorLink(url, text)}`\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"headerLink(4, \"https://observablehq.com/@embracelife/tutorial-utilities\", \"tutorial-utilities\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"step2 = md`### Build anchor link to open in another page`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"anchorLink = (url, text) =>\n html`${text}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"anchorLink(\"https://github.com/observablehq/stdlib/blob/master/src/dom/range.js\", \"source\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"step3 = md` ### Build an anchor link with url and text within the same notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"anchorLinkWithin = (url, text) =>\n html`${text}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"anchorLinkWithin(\"#anchorlink\", \"Build anchor link\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"md `### How to embed a webpage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"webpage = (w, h, url) =>\nhtml``","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"webpage(100, 50, \"https://javascript.info/promise-chaining#bigger-example-fetch\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"step4 = md` ### How to embed a video`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"video = url =>\n html`