The avatar for @bronna
Brianna Wilson
data journalist, gardener, engineer
Public
DVS-workshop
Edited
Oct 29, 2023
Fork of Canvas setup - random scatter plot
•
5 forks
DVS-workshop
Canvas setup - random scatter plot
STARTER: Canvas setup - random scatter plot
WebGL/Three.js setup - random scatterplotSTARTER: WebGL/Three.js setup - random scatterplotWebGL/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
canvas = null
Insert cell
Insert cell
numberOfPoints = null
Insert cell
// optional: make dynamic attributes
// viewof numberOfPoints = Inputs.range([100, 10000], {value: 100, step: 1, label: "Number of Points"})
Insert cell
Insert cell
Insert cell
Insert cell
{
// apply the '2D' Canvas context to the canvas element (as opposed to WebGL)

// clear the canvas (in case any points have already been drawn)

// use a for loop to draw the dots at random x and y positions

return canvas
}
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