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 with Inputs
Dashboard
{
reset;
let n = 1;
const add = html`<button>Add an entry`;
add.onclick = () => display('entries', html`This is entry: ${n++}`, invalidation);
display('entries-toolbar', add, invalidation);
}
reset = {
const input = html`<button>Remove all manual entries`;
display('entries-toolbar', input, invalidation);
return Generators.input(input);
}
{
const color = `hsl(${number*7},100%,30%)`;
const item = html`<strong style="color: ${color}">We're at number ${number} and counting!`;
display('log', item, invalidation);
}
{
const color = `hsl(${(letter.charCodeAt(0)-65)*14},100%,30%)`;
const item = html`<span style="color: ${color}">New letter: ${letter}!`;
display('log', item, Promises.delay(4000));
}
log_delay = {
const input = html`<input type=number min=500 max=4000 step=250 value=250>`;
display('log-options', input, invalidation);
return Generators.input(input);
}
image = {
let cb = 0; // Source URL modifier to circumvent browser cache.
const more = html`<a href=#><strong>Add an image.`;
display('images', html`<p><small>${more} Click any image to remove it.`, invalidation);
more.onclick = e => { e.preventDefault(); addImage() };
addImage();
addImage();
function addImage() {
const img = html`<img height=80 src=https://picsum.photos/80?${cb++}>`;
const remove = display('images', img, invalidation);
img.onclick = remove;
}
}
function dashboard(view) {
const regions = new Map(Array.from(view.querySelectorAll('[data-region]'), n => [n.dataset.region, {
node: n,
template: n.dataset.template || '<div>',
}]));
view.oninput = view.onchange = view.onclick = e => e.stopImmediatePropagation();
view.value = function(region, content, invalidate) {
const {node, template} = regions.get(region);
const item = html`${template}${content}`;
node.appendChild(item);
const remove = () => { if(item.parentNode === node) node.removeChild(item) };
if(invalidate) invalidate.then(remove);
return remove;
};
return view;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.