Created
January 25, 2024 12:15
-
-
Save slapglif/5a89a3cbd7e93065f236a4bd4c214e64 to your computer and use it in GitHub Desktop.
Force Graph Gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <style> | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| } | |
| #3d-graph { | |
| width: 100%; | |
| height: 100%; | |
| background-color: lightgrey; /* For visibility */ | |
| } | |
| </style> | |
| <script src="https://unpkg.com/three@0.109.0/build/three.min.js"></script> | |
| <script src="https://unpkg.com/3d-force-graph"></script> | |
| <script src="https://unpkg.com/three-spritetext"></script> | |
| </head> | |
| <body> | |
| <div id="3d-graph"></div> | |
| <script> | |
| const gData = {"nodes": [{"id": ". (Crohn's Disease", "group": 1, "label": "Node . (Crohn's Disease"}, {"id": "Probiotics", "group": 1, "label": "Node Probiotics"}, {"id": "Crohn's Disease", "group": 1, "label": "Node Crohn's Disease"}, {"id": "Omega-3 fatty acids", "group": 1, "label": "Node Omega-3 fatty acids"}, {"id": "fish oil supplements", "group": 1, "label": "Node fish oil supplements"}, {"id": "Turmeric", "group": 1, "label": "Node Turmeric"}, {"id": "curcumin", "group": 1, "label": "Node curcumin"}, {"id": "Boswellia", "group": 1, "label": "Node Boswellia"}, {"id": "Indian frankincense", "group": 1, "label": "Node Indian frankincense"}, {"id": "Psychobiotics", "group": 1, "label": "Node Psychobiotics"}, {"id": "improved mental health and reduced inflammation", "group": 1, "label": "Node improved mental health and reduced inflammation"}, {"id": "Acupuncture", "group": 1, "label": "Node Acupuncture"}, {"id": "Mindfulness-based stress reduction (MBSR)", "group": 1, "label": "Node Mindfulness-based stress reduction (MBSR)"}, {"id": "Aloe vera", "group": 1, "label": "Node Aloe vera"}, {"id": "Vitamin D", "group": 1, "label": "Node Vitamin D"}, {"id": "improved mood and reduced anxiety", "group": 1, "label": "Node improved mood and reduced anxiety"}], "links": [{"source": ". (Crohn's Disease", "target": "Probiotics", "relation": "has alternative treatments"}, {"source": "Probiotics", "target": "Crohn's Disease", "relation": "help with"}, {"source": "Crohn's Disease", "target": "Probiotics", "relation": "has alternative treatments"}, {"source": "Crohn's Disease", "target": "Omega-3 fatty acids", "relation": "has alternative treatments"}, {"source": "Crohn's Disease", "target": "Turmeric", "relation": "has alternative treatments"}, {"source": "Crohn's Disease", "target": "Boswellia", "relation": "has alternative treatments"}, {"source": "Crohn's Disease", "target": "Psychobiotics", "relation": "has alternative treatments"}, {"source": "Crohn's Disease", "target": "Acupuncture", "relation": "has alternative treatments"}, {"source": "Crohn's Disease", "target": "Mindfulness-based stress reduction (MBSR)", "relation": "has alternative treatments"}, {"source": "Crohn's Disease", "target": "Aloe vera", "relation": "has alternative treatments"}, {"source": "Crohn's Disease", "target": "Vitamin D", "relation": "has alternative treatments"}, {"source": "Omega-3 fatty acids", "target": "fish oil supplements", "relation": "found in"}, {"source": "Turmeric", "target": "curcumin", "relation": "contains"}, {"source": "Boswellia", "target": "Indian frankincense", "relation": "also known as"}, {"source": "Psychobiotics", "target": "improved mental health and reduced inflammation", "relation": "have potential benefits"}, {"source": "Psychobiotics", "target": "improved mood and reduced anxiety", "relation": "have potential benefits"}]}; | |
| const imgTexture = new THREE.TextureLoader().load('https://i.redd.it/e914yqvf4w681.jpg'); | |
| imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping; | |
| const Graph = ForceGraph3D()(document.getElementById('3d-graph')) | |
| .graphData(gData) | |
| .nodeAutoColorBy(d => d) | |
| .linkAutoColorBy(d => d.source) | |
| .nodeThreeObject(node => { | |
| // sphere object | |
| const group = new THREE.Group(); | |
| const sphereGeometry = new THREE.SphereGeometry(2, 8, 8); // Adjust size as needed | |
| const sphereMaterial = new THREE.MeshBasicMaterial({color: node.color}); | |
| const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); | |
| // label | |
| const sprite = new SpriteText(node.label); | |
| sprite.material.depthWrite = false; // Ensure label is always on top | |
| sprite.color = node.color; // Text color | |
| sprite.textHeight = 4; // Adjust text size as needed | |
| sprite.position.set(0, 5, 0); // Offset position to ensure visibility. Adjust as needed. | |
| group.add(sphere); | |
| group.add(sprite); | |
| return group; | |
| } | |
| ).onNodeHover(node => { | |
| if (node) { | |
| node.color = "blue" | |
| } | |
| }) | |
| .onNodeClick(node => { | |
| // todo: add logic here | |
| }).linkDirectionalParticles(0.5) | |
| .linkDirectionalParticleWidth(0.5) | |
| .linkDirectionalParticleColor(() => 'rgba(0,50,255,0.2)') | |
| .linkDirectionalParticleSpeed(0.005) | |
| .linkOpacity(0.75) | |
| .linkCurveRotation(Math.PI / 2) | |
| .cameraPosition({z: 200}) | |
| .d3Force('link', d3.forceLink().distance(30)) | |
| .d3Force('charge', d3.forceManyBody().strength(-50)) | |
| .onEngineStop(() => { | |
| // Set the background texture once the engine stops | |
| Graph.scene().background = imgTexture; | |
| }); | |
| // Customize the forces for a specific shape | |
| //Graph.d3Force('charge').strength(-120); | |
| // Graph.d3Force('link').distance(link => link.distance); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment