canvas = {
// from three-forcegraph example, just changed appendChild by returning the canvas
const Graph = new ThreeForceGraph()
.graphData(data)
.nodeColor((d) => {
return "green";
})
.linkColor( d => {return "#9E918C" });
// 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
}
data = d3.json("https://gist.githubusercontent.com/philipp-ulm/8aac32439e2fb92a3dad3da443f692e8/raw/93710da0594c0344a9d1f55bcbdfd67782946b96/stack-overflow-network.json")
data.nodes.forEach( (d,i) => d.id = d.name)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
