data journalist, gardener, engineer
Canvas setup - random scatter plotSTARTER: Canvas setup - random scatter plotWebGL/Three.js setup - random scatterplotSTARTER: WebGL/Three.js setup - random scatterplotSTARTER: WebGL/Three.js 3D force network graphCanvas Animated PlotsSTARTER: Canvas Animated Plots
WebGL/Three.js 3D force network graph
graphDiv = html`<div id="3d-graph" width="600" height="600"></div>`
ForceGraph3D = require('3d-force-graph')
THREE = import("three@0.158.0")
UnrealBloomPass = (await import("three@0.158.0/examples/jsm/postprocessing/UnrealBloomPass.js")).UnrealBloomPass
numberOfPoints = 500
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
}
Graph = ForceGraph3D()(document.getElementById('3d-graph'))
.backgroundColor('#000003')
.graphData(data)
.nodeLabel('id')
.enableNodeDrag(false)
bloomPass = {
const bloomPass = new UnrealBloomPass()
bloomPass.strength = 2
bloomPass.radius = 1
return bloomPass
}
Graph.postProcessingComposer().addPass(bloomPass)
// If you want to run from a .html file
// <!DOCTYPE html>
// <html>
// <head>
// <meta charset="UTF-8">
// <meta name="viewport" content="width=device-width, initial-scale=1.0">
// <title>WebGL Data Visualization</title>
// <style>
// body { margin: 0; }
// canvas { display: block; }
// </style>
// <script src="https://unpkg.com/3d-force-graph"></script>
// </head>
// <body>
// <div id="3d-graph"></div>
// <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
// <script type="module">
// import { UnrealBloomPass } from 'https://unpkg.com/three/examples/jsm/postprocessing/UnrealBloomPass.js'
// const Graph = ForceGraph3D()
// (document.getElementById('3d-graph'))
// .backgroundColor('#000003')
// .jsonUrl('https://raw.githubusercontent.com/vasturiano/3d-force-graph/master/example/datasets/miserables.json')
// .nodeLabel('id')
// .enableNodeDrag(false)
// //.nodeAutoColorBy('group')
// // Add glow effect with three.js postprocessing
// const bloomPass = new UnrealBloomPass()
// bloomPass.strength = 1
// bloomPass.radius = 0.8
// Graph.postProcessingComposer().addPass(bloomPass)
// // camera orbit
// let angle = 0
// const distance = 700
// </script>
// </body>
// </html>
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.
