Interactive data visualization
Public
Edited
Jan 19, 2023
1 fork
1 star
tl1 = {
a.reset();
a.time = 0;
Object.assign(camera, rect.pad(tableBounds_.rect, -2));
a.time = 5;
randomTable_.opacity = 1;
Object.assign(camera, rect.pad(tableTargetCell_.rect, -1.5));
tableTargetCellNeighbours_.forEach((cell, no) => {
a.time = 0;
cell.opacity = 0;
a.time = 5 + no;
cell.opacity = 0;
a.time = 5 + no + 1;
cell.opacity = 1;
});
[...tableTargetCellNeighbours_, tableTargetCell_].forEach(cell => {
a.time = 9;
cell.stroke = 'red';
cell.lineWidth = 0.15;
a.time = 10;
cell.stroke = 'lightgray';
cell.lineWidth = 0.1;
cell.opacity = 1;
a.time = 15;
cell.stroke = 'lightgray';
cell.lineWidth = 0.1;
cell.opacity = 1;
a.time = 16;
cell.opacity = 0;
cell.stroke = 'lightgray';
cell.lineWidth = 0.1;
a.time = 18;
cell.opacity = 0;
cell.stroke = 'lightgray';
cell.lineWidth = 0.1;
});
a.time = 12;
randomTable_.opacity = 0;
arrow_.opacity = 0;
arrow_.target = rect.relPoint(tableTargetCell_.rect, 3, 0.5);
Object.assign(camera, rect.pad(tableTargetCell_.rect, -1.5));
nextCell_.opacity = 0;
nextCell_.rect = rect.compose(tableTargetCell_.rect, [4, 0]);
a.time = 15;
arrow_.opacity = 1;
nextCell_.opacity = 1;
arrow_.target = rect.relPoint(tableTargetCell_.rect, 5, 0.5);
Object.assign(camera, rect.pt(rect.relPoint(tableTargetCell_.rect, 3, 0.5), 3));
nextCell_.rect = rect.compose(tableTargetCell_.rect, [6, 0]);
a.time = 18;
nextCell_.rect = tableTargetCell_.rect;
nextCell_.opacity = 1;
Object.assign(camera, rect.pt(rect.relPoint(tableTargetCell_.rect, 3, 0.5), 3));
randomTable_.opacity = 0;
return a.timelines;
}
slideBase = ({
width: 1920,
height: 1080,
timeMin: 10,
timeMax: 12,
duration: 3,
render(time, ctx) {
a.timelines = tl1;
a.time = time;
rect.camera(camera, ctx, 1080);
objects.forEach(obj => obj.draw(ctx));
},
})
slides = [
{...slideBase, timeMin: 0, timeMax: 0, duration: 1},
{...slideBase, timeMin: 0, timeMax: 5, duration: 1},
{...slideBase, timeMin: 5, timeMax: 9, duration: 1},
{...slideBase, timeMin: 9, timeMax: 12, duration: 1},
{...slideBase, timeMin: 12, timeMax: 15, duration: 1},
{...slideBase, timeMin: 15, timeMax: 18, duration: 1},
]
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.
