Data visualization/Interactive media and full-stack data science web app developer.
Published
Edited
Feb 4, 2021
Importers
17 stars
Also listed in…
Power BI
{
var dom = html``;
yield dom;
const Observable = await import("https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js");
const notebook = await import("https://api.observablehq.com/@a10k/inline-export-test.js?v=3");
const main = (new Observable.Runtime).module(notebook.default, name => {
if (name === "time") {
return new Observable.Inspector(dom);
}
});
}
script_to_data_uri = async (sc) => {
//var res = await fetch(sc)
//var raw = await res.text()
var raw = await handle_script_file(sc)
var encodedString = "data:application/javascript;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(raw)))
return encodedString;
}
{
const doc = "data:text/html;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(`<!DOCTYPE html><body>
<div id="observablehq-390d20b0"></div>
<script> ${snippet}</script>`)))
return html`<iframe style="width:100%;height:75px;border:none;" sandbox="allow-scripts" src="${doc}">`
}
notebook_url = "https://api.observablehq.com/@d3/bar-chart.js?v=3"
required_cell = "chart"
side_effect_cells = []
func_name = "embed"
viewof embed_code = {
var Observable = await script_to_data_uri(
"https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js"
);
var notebook = await script_to_data_uri(notebook_url);
//This will only export the function, you can name it anything you want and call it from your code...
const embed = `async function ${func_name}(target, injections) {
const Observable = await import("${Observable}");
const notebook = await import("${notebook}");
return new Promise((yes,no) => {
const main = (new Observable.Runtime).module(notebook.default, name => {
if (name === "${required_cell}") {
return new Observable.Inspector(target);
}else{
return ${JSON.stringify(
side_effect_cells
)}.includes(name) || null;
}
});
for (const name in injections) {
main.redefine(name, [], () => injections[name]);
}
yes(main);
})
}`;
const doc =
"data:text/html;charset=utf-8;base64," +
btoa(
unescape(
encodeURIComponent(`<!DOCTYPE html><body>
<div id="test"></div>
<script>
${embed}
${func_name}(document.getElementById("test"),{width:${width},height:320,color:'firebrick'}).then(later=>{
/*if you want to redefine stuff later...*/
later.redefine('color','#FF5859')
})
</script>`)
)
);
var dom = html`<iframe style="width:100%;height:350px;border:none;" sandbox="allow-scripts" src="${doc}">`;
dom.value = embed;
return dom;
}
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.
