Public
Edited
Apr 21, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
// p5.js sketch
s = s => {
s.setup = () => {
s.createCanvas(settings.width, settings.height,s.WEBGL);
s.noStroke();
};
s.draw = () => {
s.orbitControl();
s.background(235);
setLights(s);
for (let i=0; i<dataset.length;i++){
s.push();
s.translate(s.map(dataset[i][0],0.5,1,-250,450),s.map(dataset[i][1],0.5,1,-250,450),s.map(dataset[i][2],0.5,1,-325,275));
s.specularMaterial(128,0,s.map(dataset[i][3],0,50,255,0));
s.sphere(s.map(dataset[i][3],0,50,7,25));
s.pop();
}
};

};
Insert cell
setLights = (s) => {
s.ambientLight(255);
s.directionalLight(255,1,1,-1);
s.pointLight(220,220,220,-800,-800,500);
s.shininess(20);
}
Insert cell
Insert cell
Insert cell
// settings for p5.js sketch
settings = ({width: 600, height: 600, id: "p5-container"});
Insert cell
Insert cell
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