viewof values = columns({
seasons: select(["Spring", "Summer", "Fall", "Winter"]),
stooges: select({
title: "Stooges",
description: "Please pick your favorite stooge.",
options: ["Curly", "Larry", "Moe", "Shemp"],
value: "Moe"
})
})
values
md`Or with arrays`
arrayOfInputs
columns = (args) => {
const form = html`<form></form>`
form.value = {}
let cols = 0
for (const key in args) {
form.appendChild(args[key])
cols++
}
form.style = `display: grid; grid-gap: 10px 15px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`
form.oninput = () => {
form.value = Object.keys(args).reduce((result, key) => {
result[key] = args[key].value
return result
}, Array.isArray(args) ? [] : {})
}
form.oninput()
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.
