main_cells = cellMap(main)
Tech Lead at Taktile.
Formerly Firebase, Google
iframe_location = document.location // we are inside the sandbox, so the document is the iframe
runtime_variables = [...runtime._variables].map(toObject)
builtin_variables = toMap(
...[...runtime._variables].filter((v) => v._module === builtin_module_ref)
)
viewof_ast = parser.parseCell("viewof foo = 'bar'")
mutable_ast = parser.parseCell("mutable foo = 'bar'")
async_ast = parser.parseCell("foo = { await ''}")
generator_ast = parser.parseCell("foo = { yield 'async'}")
fileattachment_ast = parser.parseCell("foo = FileAttachment('filepath')")
viewof_ref_ast = parser.parseCell("foo = viewof bar")
import_ast = parser.parseCell("import {foo} from 'blah'")
compiled_variables = compile("mutable example = 12")
observable = import(
"https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js"
)
embedded_runtime = new observable.Runtime()
embedded_main = embedded_runtime.module()
embedded_variables = compiled_variables.map((v) =>
embedded_main
.variable({})
.define(v._name, v._inputs, toFunction(v._definition))
)
{
await new Promise((r) => setTimeout(r, 1000));
return embedded_variables[0]._promise;
}
Generators.observe((notify) => {
// Generator.observe is a notebook userspace concept to make emitting values simpler
embedded_main
.variable({
fulfilled: (value) => {
// Observer.fulfilled
notify(value); // pipe the variable notification up to userspace
}
})
.define(async function* () {
// zero input async generator
// this is pure JS, normally the output a compile step
// is used here
let i = 0;
while (true) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i++;
}
});
})
<div></div> <!-- DOM container we will pipe changes to -->
inspector = new observable.Inspector(cell_out) // connect Inspector to our DOM node
Generators.observe((notify) => {
// Generator.observe is a notebook userspace concept to make emitting values simpler
embedded_main.variable(inspector).define(async function* () {
// zero input async generator
// this is pure JS, normally the output a compile step
// is used here
let i = 0;
while (true) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i++;
}
});
})
notebook_observer = main._scope.get("title_cell")._observer
notebook_observer.mode
main._scope.get("title_cell")._observer._node.innerHTML
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.
