Web developer and autodidact with an interest in creative coding.
Inputs.table() with Colored RowsLinking Multiple RangesAuto-Sort InputsDate and Offset SlidersSubmittable 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
Dashboard with Inputs
display
options = {
const view = form(htl.html`<form>
<label>Size: <input name=width type=number min=200 step=50 value=400 max=1000 style=width:auto> x <input name=height type=number min=200 step=50 value=300 max=1000 style=width:auto></label><hr style=margin:0>
<label style=display:flex>Pad: <input name=pad type=range min=0 max=200 value=50 step=1 style=width:100%></label><hr style=margin:0>
<label style=display:flex><input name=colorize type=checkbox> Single color</label>
`);
display('controls', view, invalidation);
return Generators.input(view);
}
color = {
if(!options.colorize) return null;
const input = htl.html`<input type=color value=#ffffff>`;
display('optional', input, invalidation);
return Generators.input(input);
}
function dashboard(view) {
const regions = new Map(Array.from(view.querySelectorAll('[data-region]'), n => [n.dataset.region, {
node: n,
}]));
view.oninput = view.onchange = view.onclick = e => e.stopImmediatePropagation();
view.value = function(region, content, invalidate) {
const {node} = regions.get(region);
node.appendChild(content);
const remove = () => { if(content.parentNode === node) node.removeChild(content) };
if(invalidate) invalidate.then(remove);
return remove;
};
return view;
}
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.
