Web developer and autodidact with an interest in creative coding.
Public
Edited
Apr 20
Paused
7 stars
data = penguins
viewof selected = {
// The values that are visible/selectable.
const choices = data.filter(createFilterFunc(filters));
return Inputs.table(choices, {
// Obtain the current value from the helper.
// For the sake of example we also select a few initial entries.
value: retainSelection(data, choices, this?.value ?? data.slice(0, 9)),
// Allow an empty selection
required: false,
});
}
selected
selected, retainSelection(data)
values = [...selected, ...retainSelection(data)]
dataCopy = data.slice()
retainSelection(dataCopy)
// A `template` callback for Inputs.form() that displays all inputs inline.
function filterBar(inputs) {
const scope = DOM.uid().id;
return htl.html`<div class=${scope}>${Object.values(inputs)}
<style>
.${scope} { display: flex; gap: 2ch }
.${scope} form, .${scope} form > * { width: fit-content !important }
`;
}
// Creates a filter callback from an object of key/value pairs.
function createFilterFunc(filtersObj, {empty = (key, value) => value === '- any -'} = {}) {
const filters = Object.entries(filtersObj)
.filter(([key, value]) => !empty(key, value))
.map(([key, value]) => d => d[key] === value);
return filters.length ? d => filters.every(f => f(d)) : () => true;
}
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.
