Public
Edited
Apr 9
1 fork
Importers
57 stars
prefixVarsInFormulaDiscrete distribution inputheightiframe testFenced code highlighterWhat's this?FullscreenSVG editingEditable SVGFile Uploaderpt - pretty-print matrices & tensorsselectFlat inputHello html2canvasGeoJSON feature editorwidthTesting visibility continuouslyForce Simulation Web WorkermathHello SharedArrayBufferPrettier Observable BookmarkletD3 ProjectionsFullwidth Observable BookmarkletInvalidationHello iocaneDrag to re-arrangeSignatureHello JSON-editord3.csv code snippetFormat Comma-Separated TreeLayers PerspectiveMy NotebooksCool Observable NotebooksCool Notebooks Circle
Worker
// read results as they are arriving
Generators.queue(worker(blah, 100))
// don't pause between yields
Generators.observe(worker(blah, 100000))
// pass several named arguments
Generators.queue(worker(who, { n: 100, k: 21 }))
// retrieve a simple result
Generators.queue(worker(meh))
// anonymous function
Generators.queue(worker(() => "foo"))
// Async generator
Generators.queue(
worker(async function* () {
for (let i = 0; i < 100; i++) {
yield i;
}
})
)
// Use ES6 modules in the preamble
Generators.queue(
worker(
function () {
return dthree.range(0, 10);
},
{ type: "module" },
`import * as dthree from "https://cdn.jsdelivr.net/npm/d3@7/+esm";`
)
)
// a fake `dthree` that we don't use in the main thread, but avoids a runtime error with the function
dthree = null
// async function
observeWorker`return await fetch("https://d3js.org/").then(d => d.text()).then(text => text.length);`
webWorker = (method) =>
function (f, ...vars) {
let t = f[0];
const args = {};
for (let i = 0; i < vars.length; i++) {
t = `${t}${
typeof vars[i] === "function"
? function_stringify(vars[i])
: ((args[`a${i}`] = vars[i]), `data.a${i}`)
}${f[i + 1]}`;
}
// auto-detect async functions
const _async = t.match(/\b(await|async)\b/) ? "async " : "";
return Generators[method](
worker(
{
toString: () => `${_async}function main(data) {\n${t}\n;;;\n}`,
name: "main"
},
args
)
);
}
queueWorker = webWorker("queue")
observeWorker = webWorker("observe")
worker = function (f, e, preamble, transferList) {
const b = new Blob([workertext(f, preamble)], { type: "text/javascript" });
return function (notify) {
const url = URL.createObjectURL(b);
const worker = new Worker(url, { type: (e && e?.type) || "classic" });
worker.addEventListener("message", (r) => notify(r.data));
worker.postMessage(e, transferList);
return () => {
worker.terminate();
URL.revokeObjectURL(url);
};
};
}
// just like Observable, we don't want to iterate on arrays
// so we check if our iterator has a method .next()
function workertext(f, preamble = "") {
return `
${preamble}
function isIterable(obj) {
return (
typeof obj[Symbol.iterator] === "function" &&
typeof obj["next"] == "function"
);
}
const __run__ = ${typeof f === "function" ? function_stringify(f) : f};
self.onmessage = async function(e) {
const t0 = performance.now();
let result = await __run__(e.data);
const postHelper = p =>
postMessage(
typeof p !== "object" || !Object.isExtensible(p) ?
p :
Object.assign(p, {_time: performance.now() - t0})
);
if (typeof result[Symbol.asyncIterator] === "function") {
for await (const p of result) {
postHelper(p);
}
close();
}
if (typeof result !== "undefined") {
if (!isIterable(result)) result = [result];
for (const p of result) {
postHelper(p);
}
close();
}
}`;
}
// On iOS, [generator].toString() doesn't give "function*" but "function". Fix this.
function function_stringify(f) {
let g = f.toString();
if (f.prototype && f.prototype.toString() === "[object Generator]")
g = g.replace(/function\*?/, "function*");
return g;
}
function* blah(n) {
let sum = 0;
while (n-- > 0) yield (sum += n);
}
function* who({ n, k }) {
let sum = 0;
while (n-- > 0) yield k * (sum += n);
}
function meh() {
let sum = 0,
n = 100;
while (n-- > 0) {
sum += n;
}
return sum;
}
Generators.queue(worker(d => d ** 2, 10))
Generators.queue(
worker(
delaunay,
[0, 0, 1, 2.1, 4, 3],
`
importScripts("https://unpkg.com/d3-delaunay");
const de = d3;
`
)
)
Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Generators.queue(
worker(
delaunay,
Object.assign([0, 0, 1, 2.1, 4, 3], {type: "module"}),
`
import * as d3 from "https://cdn.jsdelivr.net/npm/d3-delaunay/+esm";
const de = d3;
`
)
)
function delaunay(data) {
return new de.Delaunay(Float32Array.from(data));
}
// a fake `de` that we don't use in the main thread, but avoids a runtime error with the function
de = "🤯"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.