Interactive data visualization
Public
Edited
Jan 21, 2023
class Composer {
constructor(width, height) {
this.root = document.createElement('div');
this.width = width;
this.height = height;
this.root.style.overflow = 'hidden';
this.root.style.position = 'relative';
this.root.style.width = width + 'px';
this.root.style.height = height + 'px';
this.root.style.perspective = '300px';
this.root.style.perspectiveOrigin = 'center center';
this.root.style.transformStyle = 'preserve-3d';
this.objects = [];
}
add(obj) {
this.root.appendChild(obj.root);
obj.root.style.position = 'absolute';
if (obj instanceof CanvasBg) {
} else if (obj instanceof CanvasGalleryObject) {
obj.root.style.transform = `translate3d(${this.width / 2}px, ${this.height / 2}px, 0px) matrix3d(${cameraPosMat.join(', ')}) translate3d(${obj.position[0]}px, ${obj.position[1]}px, ${obj.position[2]}px)`;
} else {
// obj.root.style.perspective = '300px';
obj.root.style.transform = `translate3d(${this.width / 2}px, ${this.height / 2}px, 0px) matrix3d(${cameraPosMat.join(', ')}) translate3d(${obj.position[0]}px, ${obj.position[1]}px, ${obj.position[2]}px) ${obj.transform || ''}`;
// obj.root.style.backfaceVisibility = 'visible';
// obj.root.style.transformStyle = 'preserve-3d';
}
this.objects.push(obj);
}
}
composer.root
renderCube(ctx, proj)
window.onKeyDown = function(e) {
const step = 30;
if ('wasdqe'.includes(e.key)) {
mutable cameraPos = glmatrix.vec3.add(
glmatrix.vec3.create(),
cameraPos,
e.key === 'w' ? glmatrix.vec3.fromValues(0, 0, step)
: e.key === 'a' ? glmatrix.vec3.fromValues(-step, 0, 0)
: e.key === 's' ? glmatrix.vec3.fromValues(0, 0, -step)
: e.key === 'd' ? glmatrix.vec3.fromValues(+step, 0, 0)
: e.key === 'q' ? glmatrix.vec3.fromValues(0, +step, 0)
: e.key === 'e' ? glmatrix.vec3.fromValues(0, -step, 0)
: glmatrix.vec3.fromValues(0, 0, 0),
);
};
}
window.addEventListener('keydown', e => window.onKeyDown(e))
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.
