// viewof i = Scrubber(numbers)
numbers = Array.from({ length: 100 }, (_, i) => i)
// md`The current value of *i* is ${i}.`
// Scrubber(numbers, {autoplay: false})
// viewof Num = Scrubber(numbers, { loop: false })
// viewof Num.update(3)
// Scrubber(numbers, {loop: false, alternate: true})
// Scrubber(["red", "green", "blue"], {delay: 1000})
dates = Array.from({length: 365}, (_, i) => {
const date = new Date(2019, 0, 1);
date.setDate(i + 1);
return date;
})
// viewof date = Scrubber(dates, {
// autoplay: false,
// loop: false,
// format: (date) => date.toLocaleString("en", { month: "long", day: "numeric" })
// })
viewof num = Scrubber(numbers, {
initial: newNum,
delay: 1000,
autoplay: false,
loopDelay: 1000
})
viewof num.value
newNum
// mutable newNum = 0
mutable newNum = 30
viewof num.value
(viewof num.o.form.value = 1)
(viewof num.value = 1)
(viewof num.o.value = 1)
viewof num.o.value
num
// mutable debug = null
style = html`
<style>
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 100;
height: 74px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 37px 0 37px 60px;
accent-color:pink
}
.paused {
border-style: double;
border-width: 0px 0 0px 60px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
input{
accent-color:white
}
</style>
`
function Scrubber(
values,
{
format = (value) => value,
index = false,
initial = 0,
delay = null,
autoplay = true,
loop = true,
loopDelay = null,
alternate = false
} = {}
) {
values = Array.from(values);
let form = html`<form style="font: 12px var(--sans-serif); font-variant-numeric: tabular-nums; display: flex; height: 50px; align-items: center;">
<button name=b class=button type=button ></button>
<label style="display: flex; align-items: center;">
<input id='dot' name=i type=range min=0 max=${
values.length - 1
} value=${initial} step=1 style="width: 0px;">
<output name=o style="margin-left: 0.4em;"></output>
</label>
</form>`;
let frame = null;
let timer = null;
let interval = null;
let direction = 1;
function start() {
// form.b.textContent = "Pause";
form.b.classList.add("paused");
if (delay === null) frame = requestAnimationFrame(tick);
else interval = setInterval(tick, delay);
}
function stop() {
// form.b.textContent = "Play";
form.b.classList.remove("paused");
if (frame !== null) cancelAnimationFrame(frame), (frame = null);
if (timer !== null) clearTimeout(timer), (timer = null);
if (interval !== null) clearInterval(interval), (interval = null);
}
function running() {
return frame !== null || timer !== null || interval !== null;
}
console.log(form.i.value);
// form.i.value = newNum;
function tick() {
if (
form.i.valueAsNumber ===
(direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)
) {
if (!loop) return stop();
if (alternate) direction = -direction;
if (loopDelay !== null) {
if (frame !== null) cancelAnimationFrame(frame), (frame = null);
if (interval !== null) clearInterval(interval), (interval = null);
timer = setTimeout(() => (step(), start()), loopDelay);
return;
}
}
if (delay === null) frame = requestAnimationFrame(tick);
step();
}
function step() {
form.i.valueAsNumber =
(form.i.valueAsNumber + direction + values.length) % values.length;
form.i.dispatchEvent(new CustomEvent("input", { bubbles: true }));
}
form.i.oninput = (event) => {
if (event && event.isTrusted && running()) stop();
form.value = values[form.i.valueAsNumber];
// mutable debug = form;
form.o.value = format(form.value, form.i.valueAsNumber, values);
};
form.b.onclick = () => {
// console.log(form.b.className);
if (running()) return stop();
// console.log(form.b.className);
// form.b.toggleClass("paused");
direction =
alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1;
form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length;
form.i.dispatchEvent(new CustomEvent("input", { bubbles: true }));
start();
};
form.i.oninput();
if (autoplay) start();
else stop();
Inputs.disposal(form).then(stop);
return form;
}
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.