File size: 9,655 Bytes
de99ac3 | 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 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | <html>
<head>
<meta charset="utf-8">
<script src="lib/bindings/utils.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></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>-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"
></script>
<center>
<h1></h1>
</center>
<style type="text/css">
#mynetwork {
width: 100%;
height: 750px;
background-color: #222222;
border: 1px solid lightgray;
position: relative;
float: left;
}
</style>
</head>
<body>
<div class="card" style="width: 100%">
<div id="mynetwork" class="card-body"></div>
</div>
<script type="text/javascript">
// initialize global variables.
var edges;
var nodes;
var allNodes;
var allEdges;
var nodeColors;
var originalNodes;
var network;
var container;
var options, data;
var filter = {
item : '',
property : '',
value : []
};
// 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([{"font": {"color": "white"}, "group": "topics", "id": "Topic_28", "label": "Topic 28", "shape": "dot", "size": 60, "title": "Topic 28: 1937 posts"}, {"color": "#00FF00", "font": {"color": "white"}, "group": "users", "id": "User_111134438961558652", "label": "User 111134438961558652", "shape": "dot", "size": 25}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_42", "label": "Topic 42", "shape": "dot", "size": 60, "title": "Topic 42: 2350 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_4", "label": "Topic 4", "shape": "dot", "size": 60, "title": "Topic 4: 7683 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_15", "label": "Topic 15", "shape": "dot", "size": 60, "title": "Topic 15: 2754 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_18", "label": "Topic 18", "shape": "dot", "size": 60, "title": "Topic 18: 19265 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_14", "label": "Topic 14", "shape": "dot", "size": 60, "title": "Topic 14: 2772 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_2", "label": "Topic 2", "shape": "dot", "size": 60, "title": "Topic 2: 17956 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_60", "label": "Topic 60", "shape": "dot", "size": 60, "title": "Topic 60: 1146 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_73", "label": "Topic 73", "shape": "dot", "size": 60, "title": "Topic 73: 732 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_8", "label": "Topic 8", "shape": "dot", "size": 60, "title": "Topic 8: 5681 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_51", "label": "Topic 51", "shape": "dot", "size": 60, "title": "Topic 51: 1799 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_38", "label": "Topic 38", "shape": "dot", "size": 60, "title": "Topic 38: 1386 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_1", "label": "Topic 1", "shape": "dot", "size": 60, "title": "Topic 1: 16132 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_59", "label": "Topic 59", "shape": "dot", "size": 60, "title": "Topic 59: 1014 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_19", "label": "Topic 19", "shape": "dot", "size": 60, "title": "Topic 19: 2479 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_83", "label": "Topic 83", "shape": "dot", "size": 60, "title": "Topic 83: 511 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_0", "label": "Topic 0", "shape": "dot", "size": 60, "title": "Topic 0: 244489 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_7", "label": "Topic 7", "shape": "dot", "size": 60, "title": "Topic 7: 5181 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_71", "label": "Topic 71", "shape": "dot", "size": 60, "title": "Topic 71: 4816 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_12", "label": "Topic 12", "shape": "dot", "size": 60, "title": "Topic 12: 3158 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_34", "label": "Topic 34", "shape": "dot", "size": 60, "title": "Topic 34: 1576 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_65", "label": "Topic 65", "shape": "dot", "size": 60, "title": "Topic 65: 896 posts"}, {"font": {"color": "white"}, "group": "topics", "id": "Topic_75", "label": "Topic 75", "shape": "dot", "size": 60, "title": "Topic 75: 585 posts"}]);
edges = new vis.DataSet([{"from": "Topic_28", "to": "User_111134438961558652", "width": 9}, {"from": "Topic_42", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_4", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_15", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_18", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_14", "to": "User_111134438961558652", "width": 2}, {"from": "Topic_2", "to": "User_111134438961558652", "width": 4}, {"from": "Topic_60", "to": "User_111134438961558652", "width": 2}, {"from": "Topic_73", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_8", "to": "User_111134438961558652", "width": 18}, {"from": "Topic_51", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_38", "to": "User_111134438961558652", "width": 1}, {"from": "Topic_1", "to": "User_111134438961558652", "width": 3}, {"from": "Topic_59", "to": "User_111134438961558652", "width": 12}, {"from": "Topic_19", "to": "User_111134438961558652", "width": 6}, {"from": "User_111134438961558652", "to": "Topic_83", "width": 1}, {"from": "User_111134438961558652", "to": "Topic_0", "width": 23}, {"from": "User_111134438961558652", "to": "Topic_7", "width": 6}, {"from": "User_111134438961558652", "to": "Topic_71", "width": 1}, {"from": "User_111134438961558652", "to": "Topic_12", "width": 2}, {"from": "User_111134438961558652", "to": "Topic_34", "width": 1}, {"from": "User_111134438961558652", "to": "Topic_65", "width": 2}, {"from": "User_111134438961558652", "to": "Topic_75", "width": 1}]);
nodeColors = {};
allNodes = nodes.get({ returnType: "Object" });
for (nodeId in allNodes) {
nodeColors[nodeId] = allNodes[nodeId].color;
}
allEdges = edges.get({ returnType: "Object" });
// 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": -80000,
"springConstant": 0.001,
"springLength": 250
},
"enabled": true,
"stabilization": {
"enabled": true,
"fit": true,
"iterations": 1000,
"onlyDynamicEdges": false,
"updateInterval": 50
}
}
};
network = new vis.Network(container, data, options);
return network;
}
drawGraph();
</script>
</body>
</html> |