Web developer and autodidact with an interest in creative coding.
{
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;
}
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.
