Web developer and autodidact with an interest in creative coding.
viewof demo = inputTemplate(
Inputs.form(
linkRanges(
d3.pairs([0, .25, .5, .75, 1]).map(
(value, i) => interval([0, 1], {
value,
color: ["#f00", "#0c0", "#fa0", "#5af"][i],
// Hide values
format: d => htl.html.fragment``,
step: .01,
width: 240
})
)
)
),
{ label: "Ranges", width: 120 }
)
demo
function linkRanges(inputs) {
const {min, max} = Math;
const clamp = (a, b, v) => v < a ? a : v > b ? b : v;
inputs.forEach((view, i, views) => {
view.addEventListener("input", () => {
let [a, b] = view.value;
const p = views[i - 1];
const n = views[i + 1];
const lo = p?.value[0] ?? -Infinity;
const hi = n?.value[1] ?? Infinity;
a = clamp(lo, hi, a);
b = clamp(lo, hi, b);
if(p) p.value = [lo, max(lo, a)];
if(n) n.value = [min(b, hi), hi];
view.value = [a, b];
});
});
return inputs;
}
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.
