The end-to-end solution for building and hosting better data apps, dashboards, and reports.
viewof colors = Inputs.checkbox(["red", "green", "blue"], {label: "color"})
colors
html`<div style="display: flex;">${colors.map(color => html`<div style="background-color: ${color}; width: 25px; height: 25px;">`)}`
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 watching = Inputs.checkbox(teams, {label: "Watching", format: x => x.name})
watching
viewof vowels = Inputs.checkbox([..."AEIOUY"], {label: "Vowel", disabled: ["Y"]})
vowels
viewof colors2 = Inputs.checkbox(["red", "green", "blue"], {value: ["red"], label: html`<b>Colors</b>`, format: x => html`<span style="text-transform: capitalize; border-bottom: solid 2px ${x}; margin-bottom: -2px;">${x}`})
colors2
viewof sizes = Inputs.checkbox(new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]), {value: [12], label: "Size"})
sizes
viewof size2 = Inputs.checkbox(
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.checkbox(d3.group(athletes, d => d.gold), {label: "Gold medal count", sort: "descending", key: [4, 5]})
goldAthletes.flat()
viewof bases = Inputs.checkbox("GATTACA", {sort: true, unique: true})
bases
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.
