Web developer and autodidact with an interest in creative coding.
Inputs.table() with Colored RowsLinking Multiple RangesAuto-Sort InputsSubmittable Input FormsDOM InspectorCustom InspectorsSnap A Slider To ValuesChecking a version's publish dateEfficient ResponsivenessSortable Notebook ListDisplaying ProgressRange SliderSearch Results PagingMonitoring EventsPrime Numbers SliderMutable FormsSticky PositioningNotebook TeasersStraight Skeleton - Reference PathsGIF Converter (canvas & SVG)Arguments Widget2D SliderMonitorSignature - A Documentation ToolkitDashboard with InputsDashboard
Date and Offset Sliders
// An example date range, spanning the past 30 days.
dates = d3.utcDays(d3.utcDay.offset(d3.utcDay(), -30), d3.utcDay())
viewof range = offsetInterval(dates, {
label: "Date range",
formatValue: date => date.toISOString().slice(0, 10),
value: [ dates[2], dates[5] ]
})
range
viewof range2 = offsetInterval(["extra small", "small", "medium", "large", "extra large"], {
label: "Sizes",
})
range2
offsetInterval(dates, {
value: [ dates[10], dates[20] ],
format: ([a, b]) => htl.html`<span ${{
style: "display: flex; justify-content: space-between"
}}>
<span>${a.toISOString().slice(0, 10)}</span>
<span>${b.toISOString().slice(0, 10)}</span>
</span>`
})
function offsetInterval(values, {
value = [values[0], values[values.length - 1]],
formatValue = v => v,
format = ([a, b]) => `${formatValue(a)} … ${formatValue(b)}`,
...options
} = {}) {
if(new Set(values).size < values.length) throw Error("All values have to be unique.");
const valueof = i => values[i];
const indexof = v => values.indexOf(v);
const _format = i => formatValue(valueof(i));
const input = interval([0, values.length - 1], {
...options,
step: 1,
value: value.map(indexof),
format: v => format(v.map(valueof)),
});
return mapInputValue(input, indices => indices.map(valueof), dates => dates.map(indexof));
}
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.
