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
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.