Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
viewof t1 = stack()
t1
// uncomment to change the data in the 5th timeline (intervals)
// (viewof t2.children[5].data = [{ start: 1, end: 4 }])
a = d3
.scaleLinear()
.domain([0, video.duration])
.range(["#a52a2a88", "#4682b488"])
.interpolate(d3.interpolateHcl)
a(0)
viewof t2 = {
const colorScale = d3
.scaleLinear()
.domain([0, 5])
.range(["blue", "red"])
.interpolate(d3.interpolateHcl);
return stack({
value: 5.3,
min: 0,
max: video.duration,
step: 0.1,
width: 600,
zoomRange: [0, 10],
zoomTranslateExtent: [-5, 11],
zoomScaleExtent: [width / video.duration, 5000],
tracks: [
{
constructor: thumbnails,
options: {
frameAt: t =>
frameAt(video.currentSrc, t, { crossOrigin: 'anonymous' }),
aspectRatio: video.videoWidth / video.videoHeight
}
},
{
constructor: ruler
},
{
constructor: buttons
},
...[
[{ start: -1, end: 1 }, { start: 2.5, end: 7 }],
[{ start: 0, end: 2 }],
[{ start: 1, end: 2 }],
[{ start: 3, end: 5 }]
].map(data => ({
constructor: intervals,
options: {
data,
color: d => colorScale(d.start)
}
})),
{
constructor: points,
options: {
data: [
{ value: -1 },
{ value: 2 },
{ value: 4 },
{ value: 1.9 },
{ value: 9 }
],
color: d => colorScale(d.value),
snap: true,
valueof: d => d.value
},
bindZoomRange: false
},
{
constructor: springRuler,
options: { speed: 5 },
bindZoomRange: false
}
]
});
}
t2
viewof t3 = stack({
value: 1.3,
min: 0,
max: video.duration,
step: 0.1,
width: 600,
zoomRange: [0, 10],
// zoomTranslateExtent: [-5, 11], // don't set it: springRuler already limits the zoom translation
zoomScaleExtent: [width / video.duration, 5000],
tracks: [
{
constructor: thumbnails,
options: {
frameAt: t =>
frameAt(video.currentSrc, t, { crossOrigin: 'anonymous' }),
aspectRatio: video.videoWidth / video.videoHeight
}
},
{
constructor: springRuler,
options: { speed: 5 }
}
]
})
t3
defaultValues = ({
tracks: []
})
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.
