Published
Edited
May 12, 2021
1 fork
Importers
Insert cell
Insert cell
Insert cell
viewof t1 = thumbnails()
Insert cell
t1
Insert cell
Insert cell
viewof t2 = thumbnails({
value: 5.72,
min: -2,
max: 10,
step: 0.1,
width: 600,
zoomRange: [3.7, 5.3],
zoomTranslateExtent: [-5, 11],
zoomScaleExtent: [100, 10000],
zoomDisabled: false,
frameAt: t => {
// see https://observablehq.com/@mourner/canvas-recorder
const ctx = DOM.context2d(160, 90);
ctx.font = '48px sans-serif';
ctx.textAlign = 'center';
ctx.fillStyle = `limegreen`;
ctx.fillRect(0, 0, 160, 90);
ctx.fillStyle = 'white';
ctx.fillText(Math.floor(t), 80, 60);
return ctx.canvas;
},
aspectRatio: 16 / 9
})
Insert cell
t2
Insert cell
Insert cell
viewof t3 = thumbnails({
value: 5.72,
min: 0,
max: video.duration,
step: 0.1,
width,
zoomRange: [0, video.duration],
zoomScaleExtent: [width / video.duration, 30000],
zoomDisabled: false,
frameAt: t => frameAt(video.currentSrc, t, { crossOrigin: 'anonymous' }),
aspectRatio: (video.videoWidth / video.videoHeight) * 0.2 // setting a smaller aspectRatio generates "slit-tears"
})
Insert cell
(viewof t3.zoomRange = [10, 20])
Insert cell
t3
Insert cell
video = html`<video controls src="https://i.imgur.com/bG8t8iJ.mp4" height="200" />`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
defaultValues = ({
frameAt: () => html`<canvas>`,
aspectRatio: 2
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more