Web developer and autodidact with an interest in creative coding.
{
const s = 400, r = s * .45;
const c = DOM.context2d(s, s);
mon.clear('demo:');
while(true) {
c.clearRect(0, 0, s, s);
const t = (Date.now() / 1000 * .3) % 1;
const a = t * Math.PI * 6;
const x = s/2 + r * Math.cos(a);
const y = s/2 + r * Math.sin(a);
c.beginPath();
c.moveTo(s/2, s/2);
c.lineTo(x, y);
c.stroke();
mon.log('demo: t', t.toFixed(3));
mon.log('demo: angle', (a/Math.PI*180).toFixed(0));
yield c.canvas;
}
}
{
let to;
(function update() {
mon.log('date', (new Date).toLocaleString());
to = setTimeout(update, 1000);
})();
invalidation.then(() => clearTimeout(to));
}
viewof mon = new Monitor
class Monitor {
constructor() {
this._items = new Map;
this._list = htl.html`<tbody>`;
const view = htl.html`<table>${this._list}`;
view.value = this;
return view;
}
clear(prefix = '') {
for(let [key, item] of this._items.entries()) {
if(key.substr(0, prefix.length) !== prefix) continue;
if(item.node.parentNode) item.node.parentNode.removeChild(item.node);
this._items.delete(key);
}
}
_initItem(name) {
const label = htl.html`<td>${name}`;
const value = htl.html`<td>`;
const node = htl.html`<tr>${label}${value}`;
this._list.appendChild(node);
this._items.set(name, {label, value, node});
}
log(key, value) {
if(!this._items.has(key)) this._initItem(key);
return this._items.get(key).value.textContent = value;
}
}
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.
