McNulty's Inputs
md`# McNulty's Inputs`
viewof balh = RangeSelection({max: 10});
balh
viewof yadda = TimelineSelections({n})
yadda
viewof n = Inputs.range([1, 10], {step: 1});
yadda
function TimelineSelections({n = 3, min = 1, max = 10, value = []}) {
const el = html`<div style=${{ display: "flex", flexDirection: 'column'}}></div>`;
const children = [...Array(n)].map((x,i) => RangeSelection({min, max, value: value.length? value[i] : []}));
el.append(html.fragment`${children}`);
children.forEach(x => {x.addEventListener('input', e => el.value = [...el.querySelectorAll('span')].map(x => x.value) );});
el.value = children.map(x => x.value);
return el;
}
yadda
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", { bubbles: true })); // Native events bubble, so we should too
}
svg = htl.svg
html = htl.html
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.
