Interactive data visualization
Public
Edited
Jan 19, 2023
1 fork
Importers
1 star
previewSlides(slides, 400)
previewSlide(slide1, 200)
slide1 = ({
width: 1920,
height: 1080,
timeMin: 0,
timeMax: 1,
duration: 3,
render(time, ctx) {
const {width, height} = this;
ctx.fillStyle = 'lightgray';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = 'black';
ctx.fillRect(
time * (width / 2 - 50) + 50,
50,
width / 2 - 50,
height - 100,
);
},
})
previewSlide(slide2, 200)
slide2 = ({
width: 500,
height: 500,
timeMin: 1,
timeMax: 2,
duration: 3,
render(time, ctx) {
const {width, height} = this;
ctx.fillStyle = 'lightgray';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = 'green';
ctx.fillRect(
time * (width / 2 - 50) + 50,
50,
width / 2 - 50,
height - 100,
);
},
})
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.
