Public
Edited
Nov 23, 2024
Importers
14 stars
helloWorldNB = ({
files: [],
nodes: [
{
id: 1,
value: "md`# ${h} ${w}`",
mode: "js"
},
{
id: 2,
value: "h = \"Hello\"",
mode: "js"
},
{
id: 3,
value: "w = \"World\"",
mode: "js"
},
{
id: 4,
value: "mol = 42",
mode: "js"
},
{
id: 5,
value: "mol2 = mol + 2 - 1 * 2",
mode: "js"
}
]
})
plotNB = compilerMod.download('https://observablehq.com/@observablehq/plot');
compiledHelloWorld = compilerMod.compile(helloWorldNB);
compiledPlot = compilerMod.compile(plotNB);
js
${compiledHelloWorld.toString()}
`\n${compiledPlot.toString()}\n`
compiledPlot.fileAttachments
compiledPlot.cells
viewof div = {
const placeholder = DOM.element('div');
placeholder.style.border="1px solid darkGray"
placeholder.style.padding="4px";
const library = new runtimeMod.Library();
const runtime = new runtimeMod.Runtime(library);
compiledHelloWorld(runtime, name => {
const div = DOM.element('div');
placeholder.appendChild(div);
return new runtimeMod.Inspector(div);
});
return placeholder;
}
viewof div2 = {
const placeholder = DOM.element('div');
placeholder.style.border="1px solid darkGray"
placeholder.style.height="600px";
placeholder.style.padding="4px";
placeholder.style.overflowY="scroll";
const library = new runtimeMod.Library();
const runtime = new runtimeMod.Runtime(library);
compiledPlot(runtime, name => {
const div = DOM.element('div');
placeholder.appendChild(div);
return new runtimeMod.Inspector(div);
});
return placeholder;
}
compilerMod.ojs2notebook(`
a = 1
b = 2
c = a + b
d = {
yield 1;
yield 2;
yield 3;
}
viewof e = {
let output = {};
let listeners = [];
output.value = 10;
output.addEventListener = (listener) => listeners.push(listener);;
output.removeEventListener = (listener) => {
listeners = listeners.filter(l => l !== listener);
};
return output;
}
`)
omdNB = compilerMod.omd2notebook(`\
# Hello and welcome to OMD Markdown!
Lets create a var:
\`\`\`
a = 1
\`\`\`
Lets create b var:
\`\`\`
b = 2
\`\`\`
And now lets add them:
\`\`\`
c = a + b
\`\`\`
`)
async function *renderNotebook(nb) {
const placeholder = DOM.element('div');
placeholder.style.border="1px solid darkGray"
placeholder.style.padding="4px";
yield placeholder;
const library = new runtimeMod.Library();
const runtime = new runtimeMod.Runtime(library);
const nbCompiled = await compilerMod.compile(nb);
nbCompiled(runtime, name => {
const div = DOM.element('div');
placeholder.appendChild(div);
return new runtimeMod.Inspector(div);
});
}
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.
