Curious Frenchman who loves to make proof of concepts to learn and explore.
Published
Edited
Aug 19, 2021
1 fork
5 stars
canvas = {
// from three-forcegraph example, just changed appendChild by returning the canvas
const Graph = new ThreeForceGraph()
.graphData(gData)
.nodeColor( new THREE.Color(0) )
.linkColor( new THREE.Color(0) );
// Setup renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
// Setup scene
const scene = new THREE.Scene();
scene.add(Graph);
scene.add(new THREE.AmbientLight(0xbbbbbb));
scene.background = new THREE.Color(0xffffff);
// Setup camera
const camera = new THREE.PerspectiveCamera();
camera.far = 10000;
camera.aspect = width/height;
camera.updateProjectionMatrix();
camera.lookAt(Graph.position);
camera.position.z = Math.cbrt(N) * 180;
// Add camera controls
const tbControls = new THREE.OrbitControls(camera, renderer.domElement);
// Kick-off renderer
(function animate() { // IIFE
Graph.tickFrame();
// Frame cycle
tbControls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
})();
return renderer.domElement
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
