Data visualization and analytics at Elastic. Past clients: Plotly, World Bank, UBS, JPMorgan Chase / Bank, fintech, IoT and healthcare startups.
function setup() {
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)
const renderer = new THREE.WebGLRenderer()
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// set renderer size
renderer.setSize(width, height)
// set camera position
camera.position.set( 0, 0, 100 )
camera.lookAt( 0, 0, 0 )
controls.addEventListener("change", () => renderer.render(scene, camera));
return {scene, camera, renderer}
}
{
// set up scene, camera, and renderer
const {scene, camera, renderer} = setup()
// create just one triangle
const vertices = [
0, 1, 0, // top
0.5, 0, 1, // right
-0.5, 0, 1 // left
]
const faces = [
// 0, 1, 2 // only one face
2, 1, 0
]
const geometry = new THREE.PolyhedronGeometry(vertices, faces, 20, 0)
const material = new THREE.MeshNormalMaterial()
const triangle = new THREE.Mesh(geometry, material)
scene.add(triangle)
// tell renderer to render scene & camera
renderer.render(scene, camera);
// return the renderer's canvas element
// but normally would want to append it to the DOM
return renderer.domElement
}
{
// set up scene, camera, and renderer
const {scene, camera, renderer} = setup()
// create just one triangle
const front = Math.tan(Math.PI / 6)
const back = Math.cos(Math.PI / 6)
const vertices = [
0, 1, 0, // 0: top
1, 0, front, // 1: right
-1, 0, front, // 2: left
0, 0, -back, // 3: back middle
0, -1, 0, // 4: bottom
]
const faces = [
2, 1, 0, // left, right, top
1, 3, 0, // right, back, top
3, 2, 0, // back, left, top
2, 4, 1, // left, bottom, right
1, 4, 3, // right, bottom, back
3, 4, 2, // back, bottom, left
]
const geometry = new THREE.PolyhedronGeometry(vertices, faces, 30, 0)
const material = new THREE.MeshNormalMaterial()
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
// scale the mesh
mesh.scale.set(0.5, 1, 0.5)
// rotate, render, and return dom element
while (true) {
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
yield renderer.domElement;
}
}
{
// set up scene, camera, and renderer
const {scene, camera, renderer} = setup()
// create just one triangle
const vertices = [
-1, 1, 1, // 0: left top front
-1, -1, 1, // 1: left bottom front
1, -1, 1, // 2: right bottom front
1, 1, 1, // 3: right top front
1, -1, -1, // 4: right bottom back
1, 1, -1, // 5: right top back
-1, -1, -1, // 6: left bottom back
-1, 1, -1, // 7: left top back
0, 1, 0, // 8: top middle
0, -1, 0, // 9: bottom middle
]
const faces = [
0, 1, 2, // front 1
0, 2, 3, // front 2
3, 2, 4, // right 1
3, 4, 5, // right 2
5, 4, 6, // back 1
5, 6, 7, // back 2
7, 6, 1, // left 1
7, 1, 0, // left 2
8, 0, 3, // top front
8, 3, 5, // top right
8, 5, 7, // top back
8, 7, 0, // top left
9, 2, 1, // bottom front
9, 4, 2, // bottom right
9, 6, 4, // bottom back
9, 1, 6, // bottom left
]
const geometry = new THREE.PolyhedronGeometry(vertices, faces, 30, 0);
const material = new THREE.MeshNormalMaterial()
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
// scale the mesh
mesh.scale.set(0.5, 1, 0.5)
while (true) {
mesh.rotation.y += 0.01;
geometry.verticesNeedUpdate = true; // weird to have to do it in each loop, perhaps I'm exploiting undefined three.js behavior?
// maybe safer to scene.remove(geometry) and scene.add(geometry) (or doing it in the shader)
geometry.vertices.forEach(v => {
v.x += Math.random() - 0.5;
v.y += Math.random() - 0.5;
v.z += Math.random() - 0.5;
})
renderer.render(scene, camera);
yield renderer.domElement;
}
}
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.
