The avatar for @bronna
Brianna Wilson
data journalist, gardener, engineer
Public
DVS-workshop
Edited
Oct 29, 2023
Fork of WebGL/Three.js 3D force network graph
•
2 forks
DVS-workshop
Canvas setup - random scatter plotSTARTER: Canvas setup - random scatter plotWebGL/Three.js setup - random scatterplotSTARTER: WebGL/Three.js setup - random scatterplotWebGL/Three.js 3D force network graph
STARTER: WebGL/Three.js 3D force network graph
Canvas Animated PlotsSTARTER: Canvas Animated Plots
Insert cell
Insert cell
Insert cell
Insert cell
graphDiv = html``
Insert cell
Insert cell
Insert cell
ForceGraph3D = require('3d-force-graph')
Insert cell
THREE = import("three@0.158.0")
Insert cell
UnrealBloomPass = (await import("three@0.158.0/examples/jsm/postprocessing/UnrealBloomPass.js")).UnrealBloomPass
Insert cell
Insert cell
numberOfPoints = null
Insert cell
data = {
let data = {
nodes: [...Array(numberOfPoints).keys()].map(i => ({ id: i })),
links: [...Array(numberOfPoints).keys()]
.filter(id => id)
.map(id => ({
source: id,
target: Math.round(Math.random() * (id-1))
}))
}

return data
}
Insert cell
Insert cell
Graph = null
Insert cell
Insert cell
bloomPass = {

}
Insert cell
null
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