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
556 KiB
HTML
176 lines
556 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: #222222;
|
||
|
|
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": 51, "label": "James Mason\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 52, "label": "Marcello Mastroianni\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": 164, "label": "Anthony Hopkins\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 172, "label": "Harvey Keitel\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 215, "label": "Susan Sarandon\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 308, "label": "Ernest Borgnine\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 323, "label": "Michael Caine\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 334, "label": "Chow Yun-Fat\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 366, "label": "Catherine Deneuve\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 367, "label": "G\u00e9rard Depardieu\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 407, "label": "Vivica A. Fox\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 418, "label": "Danny Glover\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 448, "label": "Lance Henriksen\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 454, "label": "Dennis Hopper\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 457, "label": "John Hurt\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 461, "label": "Michael Ironside\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 472, "label": "Boris Karloff\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 489, "label": "Christopher Lee\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 514, "label": "Michael Madsen\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 532, "label": "Malcolm McDowell\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 553, "label": "Liam Neeson\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 554, "label": "Sam Neill\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 587, "label": "Donald Pleasence\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 608, "label": "Burt Reynolds\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 616, "label": "Eric Roberts\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 640, "label": "Martin Sheen\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 661, "label": "Donald Sutherland\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 728, "label": "Mario Adorf\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 784, "label": "Pedro Armend\u00e1riz\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 799, "label": "Ed Asner\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 800, "label": "Armand Assante\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 818, "label": "Shabana Azmi\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 821, "label": "Amitabh Bachchan\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 859, "label": "Lionel Barrymore\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 891, "label": "Wallace Beery\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 897, "label": "Ralph Bellamy\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 919, "label": "Senta Berger\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 929, "label": "Corbin Bernsen\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 947, "label": "Karen Black\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 977, "label": "Beau Bridges\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 1002, "label": "Dean Cain\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 1012, "label": "Claudia Cardinale\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 1016, "label": "David Carradine\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 1017, "label": "John Carradine\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 1075, "label": "Peter Coyote\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 11
|
||
|
|
edges = new vis.DataSet([{"from": 754177, "to": 1139300}, {"from": 108333, "to": 207834}, {"from": 4334, "to": 415556}, {"from": 244428, "to": 654710}, {"from": 757820, "to": 1031814}, {"from": 2002, "to": 461985}, {"from": 739418, "to": 757820}, {"from": 52835, "to": 438615}, {"from": 476429, "to": 619107}, {"from": 8354, "to": 1846851}, {"from": 815018, "to": 1031814}, {"from": 304261, "to": 619047}, {"from": 312647, "to": 783991}, {"from": 415582, "to": 419685}, {"from": 690450, "to": 858128}, {"from": 411804, "to": 3128033}, {"from": 634159, "to": 785664}, {"from": 821, "to": 707425}, {"from": 433853, "to": 660658}, {"from": 23173, "to": 889928}, {"from": 592789, "to": 622186}, {"from": 1125166, "to": 7390393}, {"from": 415556, "to": 700869}, {"from": 595934, "to": 695199}, {"from": 274628, "to": 651257}, {"from": 4464, "to": 509573}, {"from": 320880, "to": 619309}, {"from": 197582, "to": 451600}, {"from": 474850, "to": 536948}, {"from": 1099597, "to": 6489058}, {"from": 304265, "to": 620630}, {"from": 818, "to": 802374}, {"from": 174240, "to": 246703}, {"from": 882219, "to": 2794335}, {"from": 438463, "to": 700869}, {"from": 33245, "to": 433884}, {"from": 154146, "to": 315917}, {"from": 149831, "to": 154110}, {"from": 107574, "to": 619261}, {"from": 534863, "to": 1138228}, {"from": 756998, "to": 847301}, {"from": 154164, "to": 222444}, {"from": 619779, "to": 837792}, {"from": 434318, "to": 787462}, {"from": 10490, "to": 862605}, {"from": 4576, "to": 623427}, {"from": 837420, "to": 847264}, {"from": 462013, "to": 848533}, {"from": 62540, "to": 181397}, {"from": 222444, "to": 764406}, {"from": 2154, "to": 509573}, {"from": 4576, "to": 482285}, {"from": 619779, "to": 1428724}, {"from": 212541, "to": 612334}, {"from": 103977, "to": 1298052}, {"from": 156955, "to": 862479}, {"from": 315553, "to": 764871}, {"from": 958144, "to": 1047761}, {"from": 794199, "to": 1001108}, {"from": 1536, "to": 837420}, {"from": 15459, "to": 80228}, {"from": 52835, "to": 865787}, {"from": 7106, "to": 534501}, {"from": 80173, "to": 907888}, {"from": 222181, "to": 810426}, {"from": 15526, "to": 181881}, {"from": 490489, "to": 490513}, {"from": 4334, "to": 695170}, {"from": 4576, "to": 705549}, {"from": 354563, "to": 850809}, {"from": 13023, "to": 789374}, {"from": 462607, "to": 951019}, {"from": 655803, "to": 837797}, {"from": 619309, "to": 1129966}, {"from": 794199, "to": 993416}, {"from": 305182, "to": 813098}, {"from": 22758, "to": 455454}, {"from": 297843, "to": 462013}, {"from": 4334, "to": 332871}, {"from": 43199, "to": 482285}, {"from": 80228, "to": 579756}, {"from": 42820, "to": 678950}, {"from": 455454, "to": 896573}, {"from": 282767, "to": 603865}, {"from": 348029, "to": 785000}, {"from": 623427, "to": 708032}, {"from": 1154608, "to": 1172536}, {"from": 412883, "to": 7390393}, {"from": 705549, "to": 1126254}, {"from": 181397, "to": 1045369}, {"from": 840679, "to": 882485}, {"from": 92008, "to": 418440}, {"from": 767945, "to": 951019}, {"from": 453472, "to": 1072795}, {"from": 4437, "to": 619309}, {"from": 374974, "to": 667985}, {"from": 304262, "to": 897206}, {"from": 149822, "to": 451166}, {"from": 297669, "to": 594465}, {"from": 324845, "to": 481362}, {"from": 151155, "to": 945189}, {"from": 4437, "to": 1126254}, {"from": 837797, "to": 7390393}, {"from": 23173, "to": 297386}, {"from": 282767, "to": 661262}, {"from": 4469, "to": 471447}, {"from": 6369, "to": 222432}, {"from": 261738, "to": 739418}, {"from": 4435, "to": 576495}, {"from": 411804, "to": 644557}, {"from": 4660, "to": 417270}, {"from": 4467, "to": 619309}, {"from": 576169, "to": 893449}, {"from": 417310, "to": 419682}, {"from": 441571, "to": 945427}, {"from": 1536, "to": 906723}, {"from": 415549, "to": 433884}, {"from": 348004, "to": 764769}, {"from": 372016, "to": 6563624}, {"from": 396212, "to": 619107}, {"from": 90283, "to": 433884}, {"from": 477107, "to": 793384}, {"from": 315553, "to": 415538}, {"from": 1099597, "to": 1166534}, {"from": 348004, "to": 457410}, {"from": 1905731, "to": 2103554}, {"from": 694893, "to": 784521}, {"from": 359129, "to": 854251}, {
|
||
|
|
|
||
|
|
// adding nodes and edges to the graph
|
||
|
|
data = {nodes: nodes, edges: edges};
|
||
|
|
|
||
|
|
var options = {"edges": {"color": {"inherit": true}, "smooth": false}, "physics": {"repulsion": {"centralGravity": 0.25, "nodeDistance": 500, "damping": 0.67}, "maxVelocity": 48, "minVelocity": 0.39, "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>
|