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;
inputs.forEach((view, i, views) => {
view.addEventListener("input", () => {
let [a, b] = view.value;
const p = views[i - 1];
const n = views[i + 1];
if(p) {
p.value = [p.value[0], max(p.value[0], a)];
b = max(b, a = p.value[1]);
}
if(n) {
n.value = [min(b, n.value[1]), n.value[1]];
a = min(a, b = n.value[0]);
}
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.
