Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Unbind two synchronized inputsTime between two d3.timer framesForce Invalidationh-indexBookmark🤔 How to: Embed a Notebook in a Svelte App (two-way binding)🤔 How to: Embed a Notebook in a Svelte App (without mutable)🤔 How to: Embed a Notebook in a Svelte AppTop posters on ObservableHQ forumNotebook Visualizer with color
disposal() in iframe
iframe = html`<iframe width=316 height=166>`
{
const body = iframe.contentDocument.querySelector('body');
addDivAndInvalidation(body, 'iframe');
}
notiframe = html`<div style="width:300px; height:150px; border: 2px solid black; padding: 8px;">`
{
const body = notiframe;
addDivAndInvalidation(body, 'not iframe');
}
function addDivAndInvalidation(body, context) {
const div = html`<div style="width: 40px;height: 40px;background-color: lightblue;">`;
disposal(div).then(() => {
body.append(md`disposal(div) has been called`);
console.log(`disposal(div) has been called for ${context}`);
});
body.append(div);
}
iframe2 = html`<iframe width=316 height=166>`
{
const body = iframe2.contentDocument.querySelector('body');
const container = html`<div class="observablehq"></div>`
body.append(container)
const contentRoot = html`<div><div>`
container.append(contentRoot)
disposal(iframe2).then(()=> {
// When the iframe cell is reevaluated, disconnect the contentRoot from the .observablehq container
// to trigger the disposal(...) promises inside the content
contentRoot.remove()
// Note: also remove the document, or it will remain in the memory! (see https://stackoverflow.com/a/1309769/7351594)
const document = iframe2.contentDocument;
document &&
document.documentElement &&
document.documentElement.remove();
})
addDivAndInvalidation(contentRoot, 'iframe');
}
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.
