Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Apr 30, 2018
1 fork
23 stars
viewof user = {
try {
const {login} = await authenticate();
const hello = md`Hello, **${login}**! You’re authenticated. Hooray! 🎉`;
hello.value = {login};
return hello;
} catch (error) {
const form = html`<form><button name=button>Sign In`;
form.button.onclick = async event => {
event.preventDefault();
form.button.disabled = true;
try {
const {login} = await signin();
form.value = {login};
form.button.textContent = `Signed In (${login})`;
} catch (error) {
form.value = null;
form.button.disabled = false;
}
form.dispatchEvent(new CustomEvent("input"));
};
return form;
}
}
user
async function authenticate() {
await Promises.delay(1000);
if (!authenticated) throw new Error("not authenticated");
return {login: "bob"};
}
signin = {
const url = URL.createObjectURL(new Blob([`
<!DOCTYPE html>
<meta charset="utf-8">
<h1>Simulated Login Form</h1>
<form>
<input autofocus name=login placeholder=login type=text size=60>
<button>Sign In</button>
</form>
`], {type: "text/html"}));
invalidation.then(() => URL.revokeObjectURL(url));
return function() {
return new Promise((resolve, reject) => {
const popup = window.open(url, "_blank");
popup.addEventListener("submit", event => {
event.preventDefault();
popup.close();
const login = event.target.login.value.trim();
if (!login) return reject(new Error("empty"));
resolve({login});
});
popup.addEventListener("unload", () => {
if (popup.closed) reject(new Error("closed"));
});
});
};
}
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.
