Published
Edited
Oct 14, 2019
1 star
DOM.context2dDOM.canvas
Observable Standard Library Inside Notebook
Insert cell
Insert cell
// {
// debugger;
stdlib.html`hello world`;
// }
Insert cell
stdlib.md`# stdlib`
Insert cell
stdlib = ({
'md': omd,
'html': ohtml
})
Insert cell
import {omd} from "@embracelife/markdown-in-stdlib"
Insert cell
import {ohtml} from "@embracelife/html-in-stdlib"
Insert cell
import {template, constant, marked} from "@embracelife/ostdlib-internals"
Insert cell
import {anchorLink, stylesheet} from "@embracelife/tutorial-utilities"
Insert cell
Insert cell
onow() // counting the current time
Insert cell
onow = function*() {
while (true) {
yield Date.now();
}
}
Insert cell
md `## require.js
${anchorLink("https://github.com/observablehq/stdlib/blob/master/src/require.js", "source")}
`
Insert cell
_.VERSION
Insert cell
_ = orequire()("underscore")
Insert cell
orequire("underscore") // not sure how to use requireFrom yet
Insert cell
orequire = function(resolve) {
return resolve == null ? requireDefault : requireFrom(resolve);
}
Insert cell
Insert cell
constant = function(x) {
return function() {
return x;
};
}
Insert cell
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 += "<!--o:" + k + "-->";
} 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 += "<!--o:" + k + "-->";
}
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;
};
}
}
Insert cell
requireDefault = d3Require.require
Insert cell
requireFrom = d3Require.requireFrom
Insert cell
d3Require = require("d3-require@1.2")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more