Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
May 15, 2020
9 stars
viewof a1 = choose({
title: "Which are better, cats or dogs?",
options: [
{title: "Cats 🐈", value: "cats"},
{title: "Dogs 🐕", value: "dogs"}
]
})
viewof a2 = choose({
title: "Which breed of cat is your favorite?",
disabled: a1 !== "cats",
value: this && this.choose.value,
options: [
{value: "Siamese"},
{value: "Persian"},
{value: "Maine Coon"},
{value: "Ragdoll"},
{value: "Bengal"},
{value: "Abyssinian"},
{value: "Birman"},
{value: "Oriental Shorthair"},
{value: "Sphynx"},
{value: "Devon Rex"},
{value: "Himalayan"},
{value: "American Shorthair"},
{value: "other"}
]
})
viewof a3 = choose({
title: "Which breed of dog is your favorite?",
disabled: a1 !== "dogs",
value: this && this.choose.value,
options: [
{value: "Labrador Retrievers"},
{value: "German Shepherds"},
{value: "Golden Retrievers"},
{value: "French Bulldogs"},
{value: "Bulldogs"},
{value: "Poodles"},
{value: "Beagles"},
{value: "Rottweilers"},
{value: "German Shorthaired Pointers"},
{value: "Pembroke Welse Corgis"},
{value: "other"}
]
})
answers = [a1, a2, a3]
function choose({title, value, options = [], disabled = false}) {
const form = html`<form style="font: 14px var(--sans-serif); max-width: 640px;">
<fieldset disabled=${disabled} style=${{borderWidth: "1px", borderStyle: "solid", ...disabled && {opacity: 0.6}}}>
<legend style="font-weight: 500;">${title}</legend>
${options.map(o => html`<label style="display: flex; align-items: center;">
<input type="radio" name="choose" value="${o.value}">
<span style="margin-left: 0.4em;">${o.title == null ? o.value : o.title}</span>
</label>`)}
</fieldset>
</form>`;
if (value !== undefined) form.choose.value = value;
form.value = Promise.resolve(disabled ? undefined : value); // Don’t defer evaluation.
form.addEventListener("input", event => form.value = form.choose.value);
return form;
}
html = (await require("htl@0.2")).html
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.
