Interactive data visualization
Public
Edited
Sep 20, 2023
Importers
class Node {
constructor(meta, body) {
this.meta = meta;
this.body = body;
}
}
function node(meta, body) {
const node = new Node(meta, body);
const nodeHtml = nodeBodyToHtml(node);
const res = html`<div style="border-radius: 5px; border: 1px solid lightgray">
<div style="border-bottom: 1px solid lightgray; padding: 3px 10px; background: #fea; font-family: sans-serif; font-size: 15px">
<div style="border-radius: 3px; border: 1px solid lightgray; display: inline-block; padding: 0 4px; font-size: 12px; margin-right: 5px; color: gray; background: white">${meta.resType ? meta.resType.name : 'Node'}</div>
${meta.title}
</div>
${nodeHtml.htmlCode === node.body && false ? '' : `<div style="white-space: pre-wrap; font-family: monospace; padding: 10px; font-size: 14px; font-weight: bold; border-bottom: 0px solid lightgray">= ${nodeHtml.htmlCode}</div>`}
${'' && `<div style="white-space: pre-wrap; font-family: monospace; padding: 10px; font-size: 14px; font-weight: bold">${node.body}</div>`}
</div>`;
res.value = node;
return res;
}
function fun(meta, body) {
const fun = new Fun(meta, body);
fun.compiledWithoutDeps = compileWithoutDeps(fun);
fun.compiledWithDeps = compileWithDeps(fun);
const res = html`<div style="border-radius: 5px; border: 1px solid lightgray">
<div style="border-bottom: 1px solid lightgray; padding: 3px 10px; background: #eee; font-family: sans-serif; font-size: 15px">
<div style="border-radius: 3px; border: 1px solid lightgray; display: inline-block; padding: 0 4px; font-size: 12px; margin-right: 5px; color: gray; background: white">Function</div>
${meta.title}
</div>
<div style="white-space: pre; font-family: monospace; padding: 10px; font-size: 14px; font-weight: bold">${fun.compiledWithoutDeps}</div>
</div>`;
res.value = fun;
return res;
}
function nodeToFun(node) {
const ctx = {};
const meta = {...node.meta};
meta.imports = {...(meta.imports || {})};
meta.args = {};
meta.resType = node.meta.resType;
const nodesOrder = getGenericDeps(node, node => (node.meta.deps || {}), node => node.meta.name);
for (const [varName, node] of nodesOrder) {
for (const [importName, importFun] of Object.entries(node.meta.imports || {})) {
meta.imports[importName] = importFun;
}
if (!node.meta.isGlobal) {
ctx[varName] = node.body;
}
}
return fun(meta, ctx);
}
defaultCtx = getDefaultCtx()
function exprToHtml(expr, ctx) {
return formatExpr(expr, name => {
const targetNode = ctx[name];
const targetLib = defaultCtx[name];
if (targetNode) {
const bg = targetNode instanceof Fun ? '#eee' : '#fea';
return `<span style="display: inline-block; border-radius: 3px; border: 1px solid lightgray; padding: 0 5px; background: ${bg}; margin: 3px 0; font-family: sans-serif">${targetNode.meta.title}</span>`;
} else if (targetLib) {
const bg = (targetLib.type === types.polymorphic || targetLib.type === types.function) ? '#eee' : '#fea';
if (/^[a-z_]+$/gi.test(name)) {
return `<span style="display: inline-block; border-radius: 3px; border: 1px solid lightgray; padding: 0 5px; background: ${bg}; margin: 3px 0">${targetLib.value ? targetLib.value[0].name : name}</span>`;
} else {
return targetLib.value ? targetLib.value[0].name : name;
}
} else {
throw new Error(`Name ${expr[1]} not found in context`);
}
})
}
function nodeBodyToHtml(node) {
const expr = parseExpr(node.body);
const htmlCode = exprToHtml(expr, {...node.meta.deps, ...node.meta.imports});
const res = html`<div style="white-space: pre-wrap; font-family: monospace; font-size: 14px; font-weight: bold">${htmlCode}</div>`;
res.htmlCode = htmlCode;
return res;
}
viewof n1 = node({
title: 'n1',
name: 'n1',
resType: types.float,
deps: {},
}, '2.0 + 2.0')
viewof n2 = node({
title: 'n2',
name: 'n2',
deps: {n1},
resType: types.float,
}, 'n1 + 1.')
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.
