Design, tech, engineering and science. Head of Design and User Research.
Public
Edited
Nov 23
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' })
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.