viewof coords = Coords({ label: "Coordinates", value: [0.5, -100] })
Coords({ labels: ["A", "B", "C", "D"], value: [1, 3, 5, 7] })
coords
Coordinates = ({
label,
labels = ["X", "Y", "Z"],
value = [0, 0],
style = "width:10ch;"
} = {}) => {
labels = labels.slice(0, value.length);
const form = html`
<form class="${standard_classList}" style="display:flex; gap:1ch;">
${label ? `<label>${label}</label>` : ``}
${value.map(
(value, i) =>
`<span>${labels[i] ?? ""}</span> <input type="number" name="${
labels[i] ?? ""
}" value=${value} style="${style}"/>`
)}
`;
form.oninput = () =>
(form.value = labels.map((label) => form[label].valueAsNumber));
form.oninput();
return form;
}
standard_classList = Inputs.text().classList[0]
// legacy
Coords = Coordinates
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.
