28:null 29:["$","title",null,{"children":"3D v3 | pbogden | Observable"}] 2e:[] 2c:{"id":"79ee895bcd3de5fe","slug":"3d-v3","title":"3D v3","thumbnail":"36f7a65ed4d446d6bb6c3f6df39ee4da897b3ac1aee41e613c5213f9057a8b42","access_level":"public","create_time":"$D2019-10-22T15:44:50.084Z","update_time":"$D2019-10-24T09:46:06.452Z","view_time":null,"first_public_time":"$D2019-10-22T15:45:23.131Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"f49bbe5451a36df9","login":"pbogden","name":"pbogden","avatar_url":"https://avatars-next.observableusercontent.com/7691d2facf985b942cdf89fa28273672d4b7fb060b62cab329e61adce36a44b2","tier":"starter_2024"},"version":205,"publish_version":205,"role":null,"authored":false,"authors":[{"type":"individual","id":"e151b61ef71fc904","login":"pbogden","name":"pbogden","avatar_url":"https://avatars-next.observableusercontent.com/7691d2facf985b942cdf89fa28273672d4b7fb060b62cab329e61adce36a44b2","tier":null}],"members":[{"type":"individual","id":"e151b61ef71fc904","login":"pbogden","name":"pbogden","avatar_url":"https://avatars-next.observableusercontent.com/7691d2facf985b942cdf89fa28273672d4b7fb060b62cab329e61adce36a44b2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"513794d57cd7813a","slug":"3d","title":"3d","owner":{"id":"f49bbe5451a36df9","login":"pbogden","name":"pbogden"}},"type":"notebook","body":{"title":"3D v3","cells":[{"id":0,"value":"md`# 3D v3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof buttons = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"{\n const buttons = d3.select(viewof buttons);\n \n buttons.select('input[name=add]').on('click', addNode)\n buttons.select('input[name=remove]').on('click', removeNode)\n \n function removeNode() {\n let { nodes, links } = Graph.graphData();\n if (nodes.length == 1) return;\n \n const node = nodes[nodes.length - 1]; // Remove this one\n\n links = links.filter(l => l.source !== node && l.target !== node); // Remove links attached to node\n nodes.splice(node.id, 1); // Remove node\n nodes.forEach((n, idx) => { n.id = idx; }); // Reset node ids to array index\n Graph.graphData({ nodes, links });\n }\n \n function addNode() {\n const { nodes, links } = Graph.graphData();\n const id = nodes.length;\n\n Graph.graphData({\n nodes: [...nodes, { id }],\n links: [...links, { source: id, target: Math.round(Math.random() * (id-1)) }]\n }); \n }\n \n return Graph.graphData().nodes\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"Graph = {\n const n = 3;\n const data = {\n nodes: [...Array(n).keys()].map(i => ({ id: i })),\n links: [...Array(n).keys()]\n .filter(id => id)\n .map(id => ({\n source: id,\n target: Math.round(Math.random() * (id-1))\n }))\n };\n \n \n const Graph = ForceGraph3D()(container)\n .graphData(data)\n .width(width)\n .height(300)\n .nodeRelSize(10)\n .nodeLabel(d => 'This is node #' + d.id)\n .linkDirectionalParticles(2)\n .linkWidth(2)\n .linkDirectionalParticleWidth(5)\n .nodeOpacity(1)\n .onNodeHover(node => container.style.cursor = node ? 'pointer' : null)\n .onNodeClick(node => {\n\n });\n \n // This determines the distance between nodes\n const linkForce = Graph\n .d3Force('link')\n .distance(link => 100);\n \n return Graph\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## References\n\n* [3d-force-graph](https://github.com/vasturiano/3d-force-graph) -- github\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"ForceGraph3D= require(\"3d-force-graph\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"