Published
Edited
May 13, 2020
Importers
2 stars
viewof data = fetchButton(
() =>
d3.json(`https://raw.githubusercontent.com/${formValue(input).dataset}`),
{
title: "Fetch!",
style: { height: "5em", width: "20em", margin: "1em" },
initialValue: "Waiting patiently for you to press fetch..."
}
)
fetchButton = function(onSubmit, options = {}) {
let {
title = "Click Me",
style = {},
initialValue = undefined,
className = "",
button = `<button class="${className}" style="${formatStyle(style)}">
${title}
</button>`,
fetchingValue = "Working...",
alterWhileFetching = true
} = options;
const form = html`<form>${button}</form>`;
form.value = initialValue;
form.addEventListener("submit", event => {
if (alterWhileFetching) {
form.value = fetchingValue;
form.dispatchEvent(new CustomEvent("input"));
}
form.value = onSubmit();
form.dispatchEvent(new CustomEvent("input"));
event.preventDefault();
});
return form;
}
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.
