You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
176 lines
302 KiB
HTML
176 lines
302 KiB
HTML
3 years ago
|
<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: 100%;
|
||
|
|
background-color: #1e1f29;
|
||
|
|
border: 1px solid lightgray;
|
||
|
|
position: relative;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#loadingBar {
|
||
|
|
position:absolute;
|
||
|
|
top:0px;
|
||
|
|
left:0px;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</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>
|
||
|
|
|
||
|
|
|
||
|
|
<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": 2, "label": "Lauren Bacall\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 8, "label": "Marlon Brando\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 9, "label": "Richard Burton\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 12, "label": "Bette Davis\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 18, "label": "Kirk Douglas\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 20, "label": "Henry Fonda\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 24, "label": "John Gielgud\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 32, "label": "Charlton Heston\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 34, "label": "William Holden\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 44, "label": "Burt Lancaster\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 47, "label": "Sophia Loren\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 51, "label": "James Mason\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 52, "label": "Marcello Mastroianni\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 53, "label": "Robert Mitchum\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 56, "label": "Paul Newman\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 57, "label": "David Niven\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 59, "label": "Laurence Olivier\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 63, "label": "Anthony Quinn\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 78, "label": "John Wayne\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 80, "label": "Orson Welles\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 90, "label": "Armin Mueller-Stahl\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 104, "label": "Antonio Banderas\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 112, "label": "Pierce Brosnan\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 115, "label": "Nicolas Cage\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 125, "label": "Sean Connery\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 134, "label": "Robert De Niro\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 140, "label": "Michael Douglas\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 147, "label": "Colin Firth\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 148, "label": "Harrison Ford\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 149, "label": "Jodie Foster\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 151, "label": "Morgan Freeman\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 163, "label": "Dustin Hoffman\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 164, "label": "Anthony Hopkins\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 172, "label": "Harvey Keitel\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 173, "label": "Nicole Kidman\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 176, "label": "Nastassja Kinski\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 178, "label": "Diane Lane\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 191, "label": "Ewan McGregor\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 194, "label": "Julianne Moore\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 198, "label": "Gary Oldman\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 206, "label": "Keanu Reeves\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 211, "label": "Mimi Rogers\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 215, "label": "Susan Sarandon\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 218, "label": "Kristin Scott Thomas\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 227, "label": "Mira Sorvino\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 230, "label": "Sylvester Stallone\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 236, "label": "Jennifer Tilly\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 246, "label": "Bruce Willis\n", "sha
|
||
|
|
edges = new vis.DataSet([{"from": 144045, "to": 415283}, {"from": 874, "to": 751638}, {"from": 9, "to": 340926}, {"from": 454, "to": 1258}, {"from": 708, "to": 949350}, {"from": 627, "to": 1186}, {"from": 634159, "to": 785664}, {"from": 24, "to": 627}, {"from": 230, "to": 5162}, {"from": 469, "to": 977}, {"from": 326, "to": 1194}, {"from": 598971, "to": 734000}, {"from": 721073, "to": 816457}, {"from": 218, "to": 603402}, {"from": 300, "to": 933727}, {"from": 872, "to": 1367}, {"from": 920, "to": 2081}, {"from": 167467, "to": 723623}, {"from": 424, "to": 453}, {"from": 805, "to": 1313}, {"from": 53, "to": 1449}, {"from": 34, "to": 1207}, {"from": 1449, "to": 538683}, {"from": 328, "to": 1159}, {"from": 617736, "to": 829155}, {"from": 172, "to": 353}, {"from": 2094, "to": 148041}, {"from": 164, "to": 1401}, {"from": 1976, "to": 903212}, {"from": 587401, "to": 704719}, {"from": 1017, "to": 1088}, {"from": 227958, "to": 415283}, {"from": 24, "to": 869}, {"from": 178, "to": 518}, {"from": 945, "to": 244707}, {"from": 1394, "to": 5212}, {"from": 47, "to": 106387}, {"from": 40545, "to": 439344}, {"from": 994, "to": 1077}, {"from": 846, "to": 2145}, {"from": 1018, "to": 1434}, {"from": 460, "to": 618}, {"from": 164, "to": 1522}, {"from": 391, "to": 518}, {"from": 587, "to": 4365}, {"from": 310, "to": 1347}, {"from": 800, "to": 5412}, {"from": 843, "to": 1847}, {"from": 1745, "to": 1884}, {"from": 342, "to": 518}, {"from": 299, "to": 1868}, {"from": 995, "to": 1800}, {"from": 1377, "to": 1902}, {"from": 981, "to": 1902}, {"from": 511, "to": 1229}, {"from": 734, "to": 978}, {"from": 1265, "to": 891092}, {"from": 273, "to": 1586}, {"from": 306, "to": 703033}, {"from": 211, "to": 708}, {"from": 869, "to": 891092}, {"from": 56, "to": 1588}, {"from": 7234, "to": 562807}, {"from": 164, "to": 596}, {"from": 353, "to": 202966}, {"from": 481, "to": 532}, {"from": 418111, "to": 891092}, {"from": 255678, "to": 813961}, {"from": 47, "to": 908919}, {"from": 618, "to": 626259}, {"from": 227, "to": 40545}, {"from": 268, "to": 424}, {"from": 44, "to": 1699}, {"from": 290047, "to": 580565}, {"from": 1560, "to": 933727}, {"from": 728, "to": 740067}, {"from": 2145, "to": 721073}, {"from": 640, "to": 623658}, {"from": 312575, "to": 523791}, {"from": 181305, "to": 814773}, {"from": 869, "to": 1445}, {"from": 32, "to": 719}, {"from": 466977, "to": 626259}, {"from": 302, "to": 314}, {"from": 661, "to": 1644}, {"from": 453, "to": 483}, {"from": 606, "to": 1745}, {"from": 2, "to": 547}, {"from": 18, "to": 738042}, {"from": 167467, "to": 320760}, {"from": 310, "to": 1831}, {"from": 804, "to": 623658}, {"from": 1522, "to": 452288}, {"from": 221527, "to": 396136}, {"from": 4462, "to": 816457}, {"from": 215, "to": 547}, {"from": 1010, "to": 418111}, {"from": 1229, "to": 813961}, {"from": 1922, "to": 523791}, {"from": 981, "to": 989}, {"from": 947, "to": 316284}, {"from": 9, "to": 1058}, {"from": 1077, "to": 452288}, {"from": 1665, "to": 658339}, {"from": 353, "to": 602}, {"from": 2, "to": 4051}, {"from": 215, "to": 685494}, {"from": 418, "to": 997}, {"from": 800, "to": 1816}, {"from": 1536, "to": 4365}, {"from": 266, "to": 1128}, {"from": 734, "to": 1233}, {"from": 272, "to": 734000}, {"from": 2069, "to": 596807}, {"from": 1036, "to": 1046}, {"from": 347, "to": 293550}, {"from": 532, "to": 1772}, {"from": 380, "to": 1644}, {"from": 1638, "to": 1868}, {"from": 227, "to": 1136}, {"from": 198, "to": 206}, {"from": 1970, "to": 275213}, {"from": 1321, "to": 1703}, {"from": 901, "to": 231319}, {"from": 842, "to": 1180}, {"from": 144045, "to": 723623}, {"from": 489, "to": 1816}, {"from": 426062, "to": 694293}, {"from": 1096, "to": 7183}, {"from": 2231, "to": 816457}, {"from": 728, "to": 1832}, {"from": 215, "to": 1018}, {"from": 459, "to": 1644}, {"from": 20, "to": 2011}, {"from": 483, "to": 1772}, {"from": 178, "to": 1136}, {"from": 1976, "to": 590055}, {"from": 2058, "to": 7042}, {"from": 453, "to": 846}, {"from": 112, "to": 553}, {"from": 991, "to": 1424}, {"from": 53, "to": 1141}, {"from": 404, "to": 661}, {"from": 4462, "to": 740067}, {"from": 1586,
|
||
|
|
|
||
|
|
// adding nodes and edges to the graph
|
||
|
|
data = {nodes: nodes, edges: edges};
|
||
|
|
|
||
|
|
var options = {"edges": {"color": {"inherit": true}, "smooth": false}, "physics": {"repulsion": {"springLength": 1205, "nodeDistance": 1190}, "maxVelocity": 23, "minVelocity": 0.75, "solver": "repulsion"}};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
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>
|