The avatar for @bronna
Brianna Wilson
data journalist, gardener, engineer
Public
DVS-workshop
Edited
Oct 29, 2023
Fork of WebGL/Three.js setup - random scatterplot
•
3 forks
DVS-workshop
Canvas setup - random scatter plotSTARTER: Canvas setup - random scatter plotWebGL/Three.js setup - random scatterplot
STARTER: WebGL/Three.js setup - random scatterplot
WebGL/Three.js 3D force network graphSTARTER: WebGL/Three.js 3D force network graphCanvas Animated PlotsSTARTER: Canvas Animated Plots
Insert cell
Insert cell
Insert cell
Insert cell
canvasElement = html``
Insert cell
Insert cell
Insert cell
THREE = import("three@0.158.0")
Insert cell
Insert cell
canvas = null
Insert cell
renderer = {
return renderer
}
Insert cell
Insert cell
scene = null
Insert cell
camera = null // left, right, top, bottom, near, far
Insert cell
//camera.position.z = 1
Insert cell
Insert cell
numberOfPoints = null
Insert cell
// // optional: make dynamic attributes
// viewof numberOfPoints = Inputs.range([100, 10000], {label: "number of points", step: 10, value: 100})
Insert cell
sizeOfPoints = null
Insert cell
pointColor = 0xffffff
Insert cell
Insert cell
//material = null
Insert cell
// // OPTIONAL: custom shader to clip square points into circle points
// material = new THREE.ShaderMaterial({
// uniforms: {
// pointSize: { value: sizeOfPoints },
// color: { value: new THREE.Color(pointColor) },
// },
// vertexShader: `
// uniform float pointSize;
// void main() {
// gl_PointSize = pointSize;
// gl_Position = vec4(position, 1.0);
// }
// `,
// fragmentShader: `
// uniform vec3 color;
// void main() {
// vec2 coord = gl_PointCoord - vec2(0.5);
// if (length(coord) > 0.5) {
// discard;
// }
// gl_FragColor = vec4(color, 1.0);
// }
// `
// })
Insert cell
points = {
// clear any existing points before drawing new ones

// create array of point coordinates

// prepare the geometry

// set geometry and material of the points
return points
}
Insert cell
Insert cell
null
Insert cell
Insert cell
null
Insert cell
// // starts animation loop
// renderLoop = {
// function update() {
// renderer.render(scene, camera)

// requestAnimationFrame(update)
// }

// update()

// // doesn't return anything, just starts the loop
// return
// }
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