The end-to-end solution for building and hosting better data apps, dashboards, and reports.
viewof color = Inputs.radio(["red", "green", "blue"], {label: "color"})
color
html`<div style="background-color: ${color}; width: 25px; height: 25px;">`
viewof vote = Inputs.radio(["Yea", "Nay", null], {value: null, format: x => x ?? "Abstain"})
vote
teams = [
{name: "Lakers", location: "Los Angeles, California"},
{name: "Warriors", location: "San Francisco, California"},
{name: "Celtics", location: "Boston, Massachusetts"},
{name: "Nets", location: "New York City, New York"},
{name: "Raptors", location: "Toronto, Ontario"},
]
viewof favorite = Inputs.radio(teams, {label: "Favorite team", format: x => x.name})
favorite
viewof vowel = Inputs.radio([..."AEIOUY"], {label: "Vowel", disabled: ["Y"]})
vowel
viewof color2 = Inputs.radio(["red", "green", "blue"], {value: "red", label: html`<b>Color</b>`, format: x => html`<span style="text-transform: capitalize; border-bottom: solid 2px ${x}; margin-bottom: -2px;">${x}`})
color2
viewof size = Inputs.radio(new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]), {value: 12, label: "Size"})
size
viewof size2 = Inputs.radio(
new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]),
{value: 12, label: "Size", format: ([name, value]) => `${name} (${value} oz)`}
)
size2
athletes = FileAttachment("athletes.csv").csv({typed: true})
viewof goldAthletes = Inputs.radio(d3.group(athletes, d => d.gold), {label: "Gold medal count", sort: "descending"})
goldAthletes
viewof base = Inputs.radio("GATTACA", {sort: true, unique: true})
base
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.
