Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" type="text/css" /> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js"> </script> | |
| <center> | |
| <h1></h1> | |
| </center> | |
| <!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" /> | |
| <script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>--> | |
| <style type="text/css"> | |
| #mynetwork { | |
| width: 700px; | |
| height: 500px; | |
| background-color: #0E1117; | |
| border: 1px solid lightgray; | |
| position: relative; | |
| float: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id = "mynetwork"></div> | |
| <script type="text/javascript"> | |
| // initialize global variables. | |
| var edges; | |
| var nodes; | |
| var network; | |
| var container; | |
| var options, data; | |
| // This method is responsible for drawing the graph, returns the drawn network | |
| function drawGraph() { | |
| var container = document.getElementById('mynetwork'); | |
| // parsing and collecting nodes and edges from the python | |
| nodes = new vis.DataSet([{"color": "#4EA0DB", "font": {"color": "#ffffff"}, "id": "joint pain", "label": "joint pain", "shape": "circle", "value": 100}, {"color": "#FE51B9", "font": {"color": "#ffffff"}, "id": "knee pain", "label": "knee pain", "shape": "circle", "value": 70}, {"color": "#FE51B9", "font": {"color": "#ffffff"}, "id": "joint pains", "label": "joint pains", "shape": "circle", "value": 70}, {"color": "#FE51B9", "font": {"color": "#ffffff"}, "id": "hip pain", "label": "hip pain", "shape": "circle", "value": 70}, {"color": "#FE51B9", "font": {"color": "#ffffff"}, "id": "joint swelling", "label": "joint swelling", "shape": "circle", "value": 70}, {"color": "#FE51B9", "font": {"color": "#ffffff"}, "id": "joint spasms", "label": "joint spasms", "shape": "circle", "value": 70}, {"color": "#FE51B9", "font": {"color": "#ffffff"}, "id": "hip joint pain", "label": "hip joint pain", "shape": "circle", "value": 70}]); | |
| edges = new vis.DataSet([{"from": "joint pain", "title": 0.9572226566398657, "to": "knee pain", "value": 0.9572226566398657, "weight": 0.9572226566398657}, {"from": "joint pain", "title": 0.9625375209664775, "to": "joint pains", "value": 0.9625375209664775, "weight": 0.9625375209664775}, {"from": "joint pain", "title": 0.95503555027131, "to": "hip pain", "value": 0.95503555027131, "weight": 0.95503555027131}, {"from": "joint pain", "title": 0.9502244303109445, "to": "joint swelling", "value": 0.9502244303109445, "weight": 0.9502244303109445}, {"from": "joint pain", "title": 0.9501415183125163, "to": "joint spasms", "value": 0.9501415183125163, "weight": 0.9501415183125163}, {"from": "joint pain", "title": 0.954950292429293, "to": "hip joint pain", "value": 0.954950292429293, "weight": 0.954950292429293}, {"from": "knee pain", "title": 0.9418004072308424, "to": "joint pains", "value": 0.4709002036154212, "weight": 0.9418004072308424}, {"from": "knee pain", "title": 0.9728595739961697, "to": "hip pain", "value": 0.48642978699808487, "weight": 0.9728595739961697}, {"from": "knee pain", "title": 0.9295580615322443, "to": "joint swelling", "value": 0.46477903076612215, "weight": 0.9295580615322443}, {"from": "knee pain", "title": 0.9360705784202505, "to": "joint spasms", "value": 0.46803528921012527, "weight": 0.9360705784202505}, {"from": "knee pain", "title": 0.9537760229169578, "to": "hip joint pain", "value": 0.4768880114584789, "weight": 0.9537760229169578}, {"from": "joint pains", "title": 0.9267684505176702, "to": "hip pain", "value": 0.4633842252588351, "weight": 0.9267684505176702}, {"from": "joint pains", "title": 0.949263384012155, "to": "joint swelling", "value": 0.4746316920060775, "weight": 0.949263384012155}, {"from": "joint pains", "title": 0.9767091604713536, "to": "joint spasms", "value": 0.4883545802356768, "weight": 0.9767091604713536}, {"from": "joint pains", "title": 0.9271664961331827, "to": "hip joint pain", "value": 0.46358324806659135, "weight": 0.9271664961331827}, {"from": "hip pain", "title": 0.9171146529864702, "to": "joint swelling", "value": 0.4585573264932351, "weight": 0.9171146529864702}, {"from": "hip pain", "title": 0.9164231845869644, "to": "joint spasms", "value": 0.4582115922934822, "weight": 0.9164231845869644}, {"from": "hip pain", "title": 0.9591815632838274, "to": "hip joint pain", "value": 0.4795907816419137, "weight": 0.9591815632838274}, {"from": "joint swelling", "title": 0.9714236421275902, "to": "joint spasms", "value": 0.4857118210637951, "weight": 0.9714236421275902}, {"from": "joint swelling", "title": 0.9166539186706262, "to": "hip joint pain", "value": 0.4583269593353131, "weight": 0.9166539186706262}, {"from": "joint spasms", "title": 0.9179037086580787, "to": "hip joint pain", "value": 0.45895185432903934, "weight": 0.9179037086580787}]); | |
| // adding nodes and edges to the graph | |
| data = {nodes: nodes, edges: edges}; | |
| var options = { | |
| "configure": { | |
| "enabled": false | |
| }, | |
| "edges": { | |
| "color": { | |
| "inherit": true | |
| }, | |
| "smooth": { | |
| "enabled": true, | |
| "type": "dynamic" | |
| } | |
| }, | |
| "interaction": { | |
| "dragNodes": true, | |
| "hideEdgesOnDrag": false, | |
| "hideNodesOnDrag": false | |
| }, | |
| "physics": { | |
| "barnesHut": { | |
| "avoidOverlap": 0, | |
| "centralGravity": 0.3, | |
| "damping": 0.09, | |
| "gravitationalConstant": -2500, | |
| "springConstant": 0.001, | |
| "springLength": 250 | |
| }, | |
| "enabled": true, | |
| "stabilization": { | |
| "enabled": false, | |
| "fit": true, | |
| "iterations": 1000, | |
| "onlyDynamicEdges": false, | |
| "updateInterval": 50 | |
| } | |
| } | |
| }; | |
| network = new vis.Network(container, data, options); | |
| return network; | |
| } | |
| drawGraph(); | |
| </script> | |
| </body> | |
| </html> |