Published
Edited
Aug 10, 2020
1 fork
3 stars
Insert cell
md`# threejs points made of bars`
Insert cell
{
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);

// bars which is actually graph
const bars = new THREE.Object3D();
const barsGeometry = new THREE.Geometry();
const barsMaterial = new THREE.PointsMaterial({
color: '#ffff00',
size : 0.1
});
for(let i = 0; i < 1000; i++) {
const bar = getBar(Math.random() * 1000, Math.random() * 1000, 200);
bar.lookAt(new THREE.Vector3());
bars.add(bar);
}
const points = new THREE.Points(barsGeometry, barsMaterial);
scene.add(bars);
//orbitcontrols
const controls = new THREE.OrbitControls(camera, renderer.domElement);
function render() {
requestAnimationFrame( render );
camera.lookAt(new THREE.Vector3());
renderer.render(scene, camera);
}
render();

return renderer.domElement;

}
Insert cell
Insert cell
Insert cell
data = JSON.parse(await FileAttachment('population909500.json').text())[0][1];
Insert cell
height = 500
Insert cell
Insert cell
Insert cell

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.
Learn more