News and graphics at @ClimateLab, a project of @PostGraphics.
function xyzInput({
label,
xExtent = [0, 1],
xFormat = d => d,
xLabel = "x",
xStep = "any",
xValue,
yExtent = [0, 1],
yFormat = d => d,
yLabel = "y",
yStep = "any",
yValue,
zExtent = [0, 1],
zFormat = d => d,
zLabel = "z",
zStep = "any",
zValue,
} = {}){
const mid = extent => extent.reduce((a, b) => a + b) / 2;
const x = isFinite(xValue) ? xValue : mid(xExtent)
const y = isFinite(yValue) ? yValue : mid(yExtent)
const z = isFinite(zValue) ? zValue : mid(zExtent)
const style = `
.xyz-form legend {
font-weight: bold;
}
.xyz-form .value {
font-family: monospace;
}
`
const form = html`
<form class="xyz-form">
<style>${style}</style>
${label ? `<legend>${label}</legend>` : ""}
<div><i>${xLabel}</i> <input type=range name=x min=${xExtent[0]} max=${xExtent[1]} step=${xStep} value=${x}> <span class="value x-value"></span></div>
<div><i>${yLabel}</i> <input type=range name=y min=${yExtent[0]} max=${yExtent[1]} step=${yStep} value=${y}> <span class="value y-value"></span></div>
<div><i>${zLabel}</i> <input type=range name=z min=${zExtent[0]} max=${zExtent[1]} step=${zStep} value=${z}> <span class="value z-value"></span></div>
</form>`
const a = ["x", "y", "z"];
const f = {x: xFormat, y: yFormat, z: zFormat};
form.oninput = () => {
form.value = a.map(n => {
const v = form[n].valueAsNumber;
form.querySelector(`.${n}-value`).innerHTML = f[n](v);
return v;
});
};
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.
