numbers = Array.from({length: 256}, (_, i) => i)
dates = Array.from({ length: 365 }, (_, i) => {
const date = new Date(2019, 0, 1);
date.setDate(i + 1);
return date;
})
letters = 'abcdefghijklmnopqrstuvwxyz'.split('')
viewof a = Player(dates, {
autoplay: true,
initial: 100,
format: (date) =>
date.toLocaleString("en", { month: "long", day: "numeric" }),
debug: true
})
viewof b = Player(letters, { index: true, delay: 1000 })
viewof c = Player(numbers, { delay: 250 })
viewof d = Player(numbers, { loop: true, alternate: true })
viewof e = Player(numbers, {
width: 450,
time: true,
loop: true
})
viewof f = Player(letters, {
delay: 250,
loop: true,
show: { play: true, stop: true }
})
viewof g = Player(letters, {
delay: 350,
loop: true,
show: { stepLeft: false, stepRight: false, alternate: false }
})
{
const text = 'update player g';
const btn = html`<button>${text}`;
btn.onclick = () => {
const v = Math.floor(Math.random() * letters.length);
viewof g.update(v);
btn.innerHTML = `${text} (latest jump to ${v})`;
};
return btn;
}
{
const text = 'toggle player g play/pause';
const btn = html`<button>${text}`;
btn.onclick = () => {
viewof g.remoteClickPlayPause();
};
return btn;
}
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.
