Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
// From https://observablehq.com/@mbostock/file-input
function getLoadedImage(src) {
return new Promise((resolve, reject) => {
const image = new Image();
image.onload = () => resolve(image);
image.onerror = reject;
image.src = src;
});
}
getLoadedImage(imgSrc)
function getLoadedIframe1(srcdoc) {
return new Promise((resolve, reject) => {
const iframe = html`<iframe>`;
iframe.onload = () => resolve(iframe);
iframe.onerror = reject;
iframe.srcdoc = srcdoc;
});
}
// It never resolves
getLoadedIframe1('<html><p>OK!</p></html>')
iframe2 = html`<iframe srcdoc="<html><p>OK!</p></html>">`
iframe2.contentWindow.document.location.href
new Promise((resolve, reject) => {
iframe2.addEventListener('load', () =>
resolve(iframe2.contentWindow.document.location.href)
);
})
awaitedIframe2 = new Promise((resolve, reject) => {
iframe2.addEventListener('load', () => resolve(iframe2));
})
awaitedIframe2.contentWindow.document.location.href
iframe3 = {
mutable calls3 = [];
return new Promise(resolve => {
const iframe = html`<iframe srcdoc="<html><p>OK!</p></html>">`;
document.body.appendChild(iframe);
iframe.onload = () => {
mutable calls3 = [
...mutable calls3,
iframe.contentWindow.document.location.href
];
document.body.removeChild(iframe);
resolve(iframe);
};
});
}
mutable calls3 = []
iframe3.contentWindow.document.location.href
iframe4 = {
const iframe = html`<iframe srcdoc="<html><p>OK!</p></html>">`;
yield iframe;
yield await new Promise((resolve, reject) => {
iframe.onload = () => {
resolve(iframe);
};
});
}
iframe4.contentWindow.document.location.href
{
mutable calls4 = [
...mutable calls4,
iframe4.contentWindow.document.location.href
];
}
mutable calls4 = []
function createIframe5() {
const iframe = html`<iframe srcdoc="<html><p>OK!</p></html>">`;
iframe.value = iframe;
iframe.onload = () => {
iframe.dispatchEvent(new CustomEvent('input'));
};
return iframe;
}
viewof iframe5 = createIframe5()
iframe5.contentWindow.document.location.href
mutable calls5 = []
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.