viewof vec3H = list([Inputs.range([0,1], { value: .1, step: .001 }),
Inputs.range([0,1], { value: .2, step: .001 }),
Inputs.range([0,1], { value: .3, step: .001 })],
{ columns: 3, label: "vec3" })
vec3H
viewof vec3V = list([Inputs.range([0,1], { value: .1, step: .001 }),
Inputs.range([0,1], { value: .2, step: .001 }),
Inputs.range([0,1], { value: .3, step: .001 })],
{ columns: 1, label: "vec3" })
viewof mat4 = list(d3.range(16).map(() => Inputs.range([0,1], { value: Math.random(), step: .001 })),
{ columns: 4, label: "mat4" })
mat4
viewof form = Inputs.form({
toggles: list([Inputs.toggle({ label: "Foo", value: true }),
Inputs.toggle({ label: "Bar", value: false }),
Inputs.toggle({ label: "Baz", value: true })],
{ columns: 3, label: "toggles" }),
mat3: list(d3.range(9).map(() => Inputs.range([0,1], { value: Math.random(), step: .001 })),
{ columns: 3, label: "mat3" }),
mat2x3: list(d3.range(6).map(() => Inputs.range([0,1], { value: Math.random(), step: .001 })),
{ columns: 2, label: "mat2x3" }),
vec4: list(d3.range(4).map(() => Inputs.range([0,1], { value: Math.random(), step: .001 })),
{ columns: 4, label: "vec4" }),
dates: list([Inputs.date({ value: "2021-09-21" }), Inputs.date({ value: "2022-09-21" })],
{ columns: 2, label: "dates" }),
colors: list([Inputs.color({ value: "#628493" }), Inputs.color({ value: "#dba4a4" }), Inputs.color({ value: "#f09494" })],
{ columns: 3, label: "colors" }),
})
form
viewof multi = list([list([Inputs.range([0,1], { value: .1, step: .1 }), Inputs.range([0,1], { value: .9, step: .1 })],
{ columns: 2 }),
list([Inputs.button("Button 1"), Inputs.button("Button 2"), Inputs.button("Button 3")],
{ columns: 3 }),
Inputs.radio(["foo", "bar", "baz"], { value: "bar" }),
Inputs.checkbox(["red", "green", "blue"], { value: ["red"] }),
list([Inputs.text({ placeholder: "First Name" }), Inputs.text({ placeholder: "Last Name" })],
{ columns: 2 }),
list([Inputs.select(new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]), { value: 12 }),
Inputs.color({ value: "#a09494" })],
{ columns: 2 })
], { columns: 3, label: "multi" })
multi
list = {
const NS = Inputs.button().className;
return (inputs, { label = "", columns = 1 } = {}) => {
const value = inputs.map(inp => inp.value);
const oninput = () => inputs.forEach((inp, i) => value[i] = inp.value);
const style = {
"display": "grid",
"grid-template-columns": `repeat(${columns},minmax(auto,calc(var(--input-width) - var(--length2))))`,
"column-gap": "var(--length2)"
};
const form = htl.html`<form onsubmit="event.preventDefault();" class="${NS}" style="padding-bottom:2px;width:100%;" oninput=${oninput}>
${label && htl.html`<label>${label}`}
<div style=${style}>
${inputs.map(inp => (inp.style.width = 'auto', inp))}
</div>
</form>`;
Object.defineProperty(form, "value", {
get: () => value,
set: vals => vals.forEach((v, i) => inputs[i].value = v)
});
form.value = value;
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.
