Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
{
const renderer = new THREE.WebGLRenderer({antialias: true});
const controls = new THREE.OrbitControls(camera, renderer.domElement);
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
try {
while (true) {
renderer.render(scene, camera);
yield renderer.domElement;
}
} finally {
controls.dispose();
renderer.dispose();
}
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
scene.add(cube);
return scene;
}
cube = {
const material = new THREE.MeshNormalMaterial();
const geometry = new THREE.BoxGeometry(1, 1, 1);
return new THREE.Mesh(geometry, material);
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(2, 2, -2)
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
THREE = {
const THREE = await require("three@0.82.1/build/three.min.js");
if (!THREE.OrbitControls) { // If not previously loaded.
const module = window.module = {exports: undefined};
THREE.OrbitControls = await require("three-orbit-controls@82.1.0/index.js").catch(() =>
module.exports(THREE)
);
}
return THREE;
}
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.
