Design, tech, engineering and science. Head of Design and User Research.
Public
Edited
Nov 23, 2024
viewof hz = Inputs.range([1, 10], { label: "Hz", step: 1, value: 4 })
interval = 1000 / hz
Inputs.button("Start", { reduce: start })
Inputs.button("Stop", { reduce: stop })
mutable l = []
function callback() {
mutable l = [mutable t, mutable dt];
}
mutable t = Date.now()
mutable dt = 0
mutable _timeoutId = null
mutable _expectedNextTickTimestamp = mutable t + interval
function start() {
mutable t = Date.now();
mutable _expectedNextTickTimestamp = Date.now() + interval;
mutable _timeoutId = setTimeout(step, interval);
}
function step() {
mutable t = Date.now();
mutable dt = mutable t - mutable _expectedNextTickTimestamp;
if (mutable dt > interval) {
// something really bad happened. Maybe the browser (tab) was inactive?
// possibly special handling to avoid futile "catch up" run
}
callback();
// Start next iteration, take drift into account
mutable _expectedNextTickTimestamp += interval;
mutable _timeoutId = setTimeout(step, Math.max(0, interval - mutable dt));
}
function stop() {
if (mutable _timeoutId) {
clearTimeout(mutable _timeoutId);
mutable _expectedNextTickTimestamp = null
mutable _timeoutId = null;
}
}
window.innerHeight
mutable __listening = false
screenHeight = {
if (!mutable __listening) {
mutable __listening = true
window.addEventListener('resize', (event) => {
mutable __innerHeight = window.innerHeight
})
}
return __innerHeight
}
mutable __innerHeight = window.innerHeight
import { toCss, cssTag } from '@jerryjappinen/templates'
toCss({ foo: 'bar' })
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.
