227 lines
819 KiB
HTML
227 lines
819 KiB
HTML
|
<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: 100%;
|
||
|
|
height: 750px;
|
||
|
|
background-color: #222222;
|
||
|
|
border: 1px solid lightgray;
|
||
|
|
position: relative;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#loadingBar {
|
||
|
|
position:absolute;
|
||
|
|
top:0px;
|
||
|
|
left:0px;
|
||
|
|
width: 100%;
|
||
|
|
height: 750px;
|
||
|
|
background-color:rgba(200,200,200,0.8);
|
||
|
|
-webkit-transition: all 0.5s ease;
|
||
|
|
-moz-transition: all 0.5s ease;
|
||
|
|
-ms-transition: all 0.5s ease;
|
||
|
|
-o-transition: all 0.5s ease;
|
||
|
|
transition: all 0.5s ease;
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
|
||
|
|
#bar {
|
||
|
|
position:absolute;
|
||
|
|
top:0px;
|
||
|
|
left:0px;
|
||
|
|
width:20px;
|
||
|
|
height:20px;
|
||
|
|
margin:auto auto auto auto;
|
||
|
|
border-radius:11px;
|
||
|
|
border:2px solid rgba(30,30,30,0.05);
|
||
|
|
background: rgb(0, 173, 246); /* Old browsers */
|
||
|
|
box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
#border {
|
||
|
|
position:absolute;
|
||
|
|
top:10px;
|
||
|
|
left:10px;
|
||
|
|
width:500px;
|
||
|
|
height:23px;
|
||
|
|
margin:auto auto auto auto;
|
||
|
|
box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
|
||
|
|
border-radius:10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#text {
|
||
|
|
position:absolute;
|
||
|
|
top:8px;
|
||
|
|
left:530px;
|
||
|
|
width:30px;
|
||
|
|
height:50px;
|
||
|
|
margin:auto auto auto auto;
|
||
|
|
font-size:22px;
|
||
|
|
color: #000000;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.outerBorder {
|
||
|
|
position:relative;
|
||
|
|
top:400px;
|
||
|
|
width:600px;
|
||
|
|
height:44px;
|
||
|
|
margin:auto auto auto auto;
|
||
|
|
border:8px solid rgba(0,0,0,0.1);
|
||
|
|
background: rgb(252,252,252); /* Old browsers */
|
||
|
|
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
|
||
|
|
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
|
||
|
|
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
|
||
|
|
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
|
||
|
|
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
|
||
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
|
||
|
|
border-radius:72px;
|
||
|
|
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#config {
|
||
|
|
float: left;
|
||
|
|
width: 400px;
|
||
|
|
height: 600px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id = "mynetwork"></div>
|
||
|
|
|
||
|
|
<div id="loadingBar">
|
||
|
|
<div class="outerBorder">
|
||
|
|
<div id="text">0%</div>
|
||
|
|
<div id="border">
|
||
|
|
<div id="bar"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div id = "config"></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([{"font": {"color": "white"}, "id": " [\u9020] ", "label": " [\u9020] ", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "0 ", "label": "0 ", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "Acedia ", "label": "Acedia ", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "Anemachi Holdings LLC ", "label": "Anemachi Holdings LLC ", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "Blasphemer ", "label": "Blasphemer ", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "GodEmperorJamal ", "label": "GodEmperorJamal ", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "IllidanStormrage ", "label": "IllidanStormrage ", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "Imyourtarget ", "label": "Imyourtarget ", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "Kaczynski Logistics Co. ", "label": "Kaczynski Logistics Co. ", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "King Kazama ", "label": "King Kazama ", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "Koog ", "label": "Koog ", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "Lurker Tako ", "label": "Lurker Tako ", "shape": "dot", "size": 10}, {"font": {"c
|
||
|
|
edges = new vis.DataSet([{"from": " [\u9020] ", "to": "0 ", "weight": 4.0}, {"from": " [\u9020] ", "to": "Acedia ", "weight": 7.9}, {"from": " [\u9020] ", "to": "Anemachi Holdings LLC ", "weight": 8.1}, {"from": " [\u9020] ", "to": "Blasphemer ", "weight": 6.0}, {"from": " [\u9020] ", "to": "GodEmperorJamal ", "weight": 6.3}, {"from": " [\u9020] ", "to": "IllidanStormrage ", "weight": 3.9}, {"from": " [\u9020] ", "to": "Imyourtarget ", "weight": 3.2}, {"from": " [\u9020] ", "to": "Kaczynski Logistics Co. ", "weight": 5.5}, {"from": " [\u9020] ", "to": "King Kazama ", "weight": 9.5}, {"from": " [\u9020] ", "to": "Koog ", "weight": 5.5}, {"from": " [\u9020] ", "to": "Lurker Tako ", "weight": 8.5}, {"from": " [\u9020] ", "to": "Mr. Wizard ", "weight": 8.4}, {"from": " [\u9020] ", "to": "Nesp ", "weight": 5.8}, {"from": " [\u9020] ", "to": "Owligarch
|
||
|
|
|
||
|
|
// adding nodes and edges to the graph
|
||
|
|
data = {nodes: nodes, edges: edges};
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
"configure": {
|
||
|
|
"enabled": true,
|
||
|
|
"filter": [
|
||
|
|
"physics"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
"edges": {
|
||
|
|
"color": {
|
||
|
|
"inherit": true
|
||
|
|
},
|
||
|
|
"smooth": {
|
||
|
|
"enabled": false,
|
||
|
|
"type": "continuous"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// if this network requires displaying the configure window,
|
||
|
|
// put it in its div
|
||
|
|
options.configure["container"] = document.getElementById("config");
|
||
|
|
|
||
|
|
|
||
|
|
network = new vis.Network(container, data, options);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
network.on("stabilizationProgress", function(params) {
|
||
|
|
document.getElementById('loadingBar').removeAttribute("style");
|
||
|
|
var maxWidth = 496;
|
||
|
|
var minWidth = 20;
|
||
|
|
var widthFactor = params.iterations/params.total;
|
||
|
|
var width = Math.max(minWidth,maxWidth * widthFactor);
|
||
|
|
|
||
|
|
document.getElementById('bar').style.width = width + 'px';
|
||
|
|
document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
|
||
|
|
});
|
||
|
|
network.once("stabilizationIterationsDone", function() {
|
||
|
|
document.getElementById('text').innerHTML = '100%';
|
||
|
|
document.getElementById('bar').style.width = '496px';
|
||
|
|
document.getElementById('loadingBar').style.opacity = 0;
|
||
|
|
// really clean the dom element
|
||
|
|
setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
return network;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
drawGraph();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|