Created
January 25, 2024 10:53
-
-
Save slapglif/c26253e52d26cf027361297b4beb5a06 to your computer and use it in GitHub Desktop.
Force Graph Gist
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Force-Directed Graph</title> | |
| <!-- Make sure the D3.js library is loaded --> | |
| <script src="https://d3js.org/d3.v6.min.js" defer></script> | |
| <style> | |
| .nodes circle { | |
| fill: #ccc; | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| .links line { | |
| stroke: #999; | |
| stroke-opacity: 0.6; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="960" height="600"></svg> | |
| <script defer> | |
| // Your D3 code will go here. Using defer to ensure this script runs after the D3 library has loaded. | |
| document.addEventListener('DOMContentLoaded', (event) => { | |
| var graph = {"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"}]}; | |
| // Width and height for the SVG | |
| const width = 960, height = 600; | |
| // Create the SVG in the body | |
| const svg = d3.select('body').append('svg') | |
| .attr('width', width) | |
| .attr('height', height); | |
| // Setup the simulation and add forces | |
| const simulation = d3.forceSimulation(graph.nodes) | |
| .force('link', d3.forceLink(graph.links).id(d => d.id)) | |
| .force('charge', d3.forceManyBody()) | |
| .force('center', d3.forceCenter(width / 2, height / 2)); | |
| // Draw lines for the links | |
| const link = svg.append('g') | |
| .attr('class', 'links') | |
| .selectAll('line') | |
| .data(graph.links) | |
| .enter().append('line'); | |
| // Draw circles for the nodes | |
| const node = svg.append('g') | |
| .attr('class', 'nodes') | |
| .selectAll('circle') | |
| .data(graph.nodes) | |
| .enter().append('circle') | |
| .attr('r', 5); | |
| // Drag functions used for interactivity | |
| function dragStart(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0.3).restart(); | |
| d.fx = d.x; | |
| d.fy = d.y; | |
| } | |
| function dragging(d) { | |
| d.fx = d3.event.x; | |
| d.fy = d3.event.y; | |
| } | |
| function dragEnd(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0); | |
| d.fx = null; | |
| d.fy = null; | |
| } | |
| node.call(d3.drag() | |
| .on('start', dragStart) | |
| .on('drag', dragging) | |
| .on('end', dragEnd)); | |
| // Define the tick function for the simulation | |
| simulation.on('tick', () => { | |
| link | |
| .attr('x1', d => d.source.x) | |
| .attr('y1', d => d.source.y) | |
| .attr('x2', d => d.target.x) | |
| .attr('y2', d => d.target.y); | |
| node | |
| .attr('cx', d => d.x) | |
| .attr('cy', d => d.y); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment