Spaces:
Runtime error
Runtime error
File size: 6,126 Bytes
053c69e 5511f86 053c69e 5511f86 053c69e 5511f86 053c69e 5511f86 053c69e 5511f86 053c69e 5511f86 053c69e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<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> |