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 = []
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.
