WebGL Data Visualization

28:null 29:["$","title",null,{"children":"WebGL/Three.js 3D force network graph | Brianna Wilson | Observable"}] 2e:T5c2,// If you want to run from a .html file // // // // // // WebGL Data Visualization // // // // //

// // // // 2f:[] 2c:{"id":"3880105990319c92","slug":null,"title":"WebGL/Three.js 3D force network graph","thumbnail":"8f4df30303dd81bb35cc8254ab3ccbfb06e091715a1672567612ed6f3ce4b0c9","access_level":"public","create_time":"$D2023-10-29T05:34:51.414Z","update_time":"$D2023-10-29T20:22:35.632Z","view_time":null,"first_public_time":"$D2023-10-29T05:34:51.414Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"bdd5b15ae58c174e","login":"bronna","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/e8378cd926f2998bd803d1651f90f4c1442c923062ce42676a4fc5460cf815fc","tier":"starter_2024"},"version":100,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc0841074bf3ab25","login":"briannawilson","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/eee1750230ba4eac2ba9c81f461a7c2cb3c2448d6fd4b00a8f3f13a73e80c37c","tier":null}],"members":[{"type":"individual","id":"dc0841074bf3ab25","login":"briannawilson","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/eee1750230ba4eac2ba9c81f461a7c2cb3c2448d6fd4b00a8f3f13a73e80c37c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"839d21f59c8d2be4","slug":"dvs-workshop","title":"DVS-workshop","owner":{"id":"bdd5b15ae58c174e","login":"bronna","name":"Brianna Wilson"}},"type":"notebook","body":{"title":"WebGL/Three.js 3D force network graph","cells":[{"id":0,"value":"# WebGL/Three.js 3D force network graph\nSee https://observablehq.com/@vasturiano/multi-dimensional-d3-force-simulation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11,"value":"## HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":15,"value":"### 1 - Create the div you'll use to draw your graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"graphDiv = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"## Javascript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":19,"value":"### 2 - Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":22,"value":"ForceGraph3D = require('3d-force-graph')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"THREE = import(\"three@0.158.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"UnrealBloomPass = (await import(\"three@0.158.0/examples/jsm/postprocessing/UnrealBloomPass.js\")).UnrealBloomPass","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"### 3 - Create random data set","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":59,"value":"numberOfPoints = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"data = {\n let data = {\n nodes: [...Array(numberOfPoints).keys()].map(i => ({ id: i })),\n links: [...Array(numberOfPoints).keys()]\n .filter(id => id)\n .map(id => ({\n source: id,\n target: Math.round(Math.random() * (id-1))\n }))\n }\n\n return data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"### 3 - Set up and render the graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":31,"value":"Graph = ForceGraph3D()(document.getElementById('3d-graph'))\n .backgroundColor('#000003')\n .graphData(data)\n .nodeLabel('id')\n .enableNodeDrag(false)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"### 4 - OPTIONAL: Add glow effect","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":37,"value":"bloomPass = {\n const bloomPass = new UnrealBloomPass()\n bloomPass.strength = 2\n bloomPass.radius = 1\n\n return bloomPass\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"Graph.postProcessingComposer().addPass(bloomPass)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"