Interactive data visualization
{
const ex = new CubeExample();
ex.setSize(200);
ex.render([2, 2, 2]);
return ex.renderer.domElement;
}
class CubeExample {
constructor() {
const material = new THREE.MeshNormalMaterial();
const geometry = new THREE.TorusKnotGeometry(0.7, 0.2, 100, 16);
this.torusKnot = new THREE.Mesh(geometry, material);
this.scene = new THREE.Scene();
this.scene.add(this.torusKnot);
const fov = 45;
const aspect = 1;
const near = 1;
const far = 1000;
this.camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
this.camera.position.set(2, 2, -2);
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
this.renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
this.renderer.setClearColor(0x000000, 0);
this.renderer.setSize(10, 10);
this.renderer.setPixelRatio(devicePixelRatio);
this.canvas = this.renderer.domElement;
}
setSize(size) {
this.renderer.setSize(size, size);
}
dispose() {
this.renderer.dispose();
}
render(cameraPos) {
this.camera.position.set(...cameraPos);
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
this.renderer.render(this.scene, this.camera);
}
}
THREE = await require("three@0.130.0/build/three.min.js")
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.
