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
373 KiB
HTML
176 lines
373 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": 27977, "label": "Modern Times\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 31381, "label": "Gone with the Wind\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 32138, "label": "The Wizard of Oz\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 32553, "label": "The Great Dictator\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 33467, "label": "Citizen Kane\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 34583, "label": "Casablanca\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 38650, "label": "It\u0027s a Wonderful Life\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 43014, "label": "Sunset Blvd.\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 45152, "label": "Singin\u0027 in the Rain\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 47396, "label": "Rear Window\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 47478, "label": "Seven Samurai\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 50083, "label": "12 Angry Men\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 50212, "label": "The Bridge on the River Kwai\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 52357, "label": "Vertigo\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 52618, "label": "Ben-Hur\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 53125, "label": "North by Northwest\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 53291, "label": "Some Like It Hot\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 54215, "label": "Psycho\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 56172, "label": "Lawrence of Arabia\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 56592, "label": "To Kill a Mockingbird\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 57012, "label": "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 57115, "label": "The Great Escape\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 58461, "label": "A Fistful of Dollars\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 59578, "label": "For a Few Dollars More\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 59742, "label": "The Sound of Music\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 60196, "label": "The Good, the Bad and the Ugly\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 61722, "label": "The Graduate\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 62622, "label": "2001: A Space Odyssey\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 63522, "label": "Rosemary\u0027s Baby\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 64115, "label": "Butch Cassidy and the Sundance Kid\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 64116, "label": "Once Upon a Time in the West\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 66921, "label": "A Clockwork Orange\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 68646, "label": "The Godfather\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 70047, "label": "The Exorcist\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 70735, "label": "The Sting\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 71315, "label": "Chinatown\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 71562, "label": "The Godfather: Part II\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 71853, "label": "Monty Python and the Holy Grail\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 72890, "label": "Dog Day Afternoon\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 73195, "label": "Jaws\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 73486, "label": "One Flew Over the Cuckoo\u0027s Nest\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 75148, "label": "Rocky\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 75314, "label": "Taxi Driver\n", "shape": "dot"}, {"font": {"color": "white"}, "id": 75686, "label": "Annie Hall\n", "shape": "dot"}, {"font": {"colo
|
||
|
|
edges = new vis.DataSet([{"from": 450259, "to": 1130884}, {"from": 1663662, "to": 3040964}, {"from": 92099, "to": 1631867}, {"from": 147800, "to": 187393}, {"from": 120667, "to": 401792}, {"from": 1650062, "to": 2704998}, {"from": 110912, "to": 378194}, {"from": 96895, "to": 1234721}, {"from": 371746, "to": 942385}, {"from": 121765, "to": 121766}, {"from": 1306980, "to": 2140479}, {"from": 95953, "to": 407304}, {"from": 3110958, "to": 4154796}, {"from": 97428, "to": 1823672}, {"from": 384537, "to": 884328}, {"from": 59742, "to": 1049413}, {"from": 104257, "to": 116996}, {"from": 217869, "to": 1843866}, {"from": 259711, "to": 1298650}, {"from": 1104001, "to": 1637688}, {"from": 1291584, "to": 1843230}, {"from": 217505, "to": 1130884}, {"from": 887912, "to": 2543164}, {"from": 830515, "to": 2379713}, {"from": 72890, "to": 99674}, {"from": 1599348, "to": 2404435}, {"from": 1228705, "to": 2883512}, {"from": 108550, "to": 221027}, {"from": 126029, "to": 145660}, {"from": 367594, "to": 383574}, {"from": 77416, "to": 99685}, {"from": 121766, "to": 450385}, {"from": 257044, "to": 339291}, {"from": 264464, "to": 1371111}, {"from": 4550098, "to": 5442430}, {"from": 369610, "to": 4881806}, {"from": 112462, "to": 338013}, {"from": 103644, "to": 368447}, {"from": 993846, "to": 2381941}, {"from": 120903, "to": 382625}, {"from": 1136608, "to": 1823672}, {"from": 266697, "to": 378194}, {"from": 1190080, "to": 1211837}, {"from": 217869, "to": 6823368}, {"from": 1325004, "to": 1673434}, {"from": 86250, "to": 119008}, {"from": 377092, "to": 396269}, {"from": 2234155, "to": 2356777}, {"from": 408236, "to": 1243957}, {"from": 328107, "to": 1599348}, {"from": 137523, "to": 317740}, {"from": 320691, "to": 1355644}, {"from": 319061, "to": 808151}, {"from": 71562, "to": 81398}, {"from": 438488, "to": 1152836}, {"from": 5580036, "to": 7713068}, {"from": 75314, "to": 113277}, {"from": 79817, "to": 1764651}, {"from": 120689, "to": 1535109}, {"from": 240772, "to": 1193138}, {"from": 1037705, "to": 1234721}, {"from": 304141, "to": 926084}, {"from": 94226, "to": 1219289}, {"from": 1596363, "to": 1856101}, {"from": 328107, "to": 1037705}, {"from": 172495, "to": 358273}, {"from": 162661, "to": 325980}, {"from": 1951266, "to": 3450958}, {"from": 107818, "to": 382625}, {"from": 120601, "to": 1190080}, {"from": 452623, "to": 475784}, {"from": 955308, "to": 1646971}, {"from": 99685, "to": 309698}, {"from": 146316, "to": 465234}, {"from": 486822, "to": 1399103}, {"from": 99674, "to": 118971}, {"from": 71562, "to": 1219289}, {"from": 1055369, "to": 1826940}, {"from": 372183, "to": 407887}, {"from": 172156, "to": 1386697}, {"from": 328107, "to": 389860}, {"from": 117509, "to": 1080016}, {"from": 988045, "to": 1211837}, {"from": 104257, "to": 325710}, {"from": 103064, "to": 1340138}, {"from": 110912, "to": 112864}, {"from": 458352, "to": 1276104}, {"from": 1764651, "to": 1951265}, {"from": 1037705, "to": 2103281}, {"from": 405159, "to": 431308}, {"from": 454848, "to": 1599348}, {"from": 399201, "to": 482571}, {"from": 120735, "to": 2820852}, {"from": 473075, "to": 9376612}, {"from": 119094, "to": 481499}, {"from": 215750, "to": 414993}, {"from": 212338, "to": 364725}, {"from": 163025, "to": 1189340}, {"from": 162661, "to": 408236}, {"from": 120663, "to": 259711}, {"from": 1010048, "to": 3741834}, {"from": 1091191, "to": 1980209}, {"from": 1517451, "to": 2179136}, {"from": 221027, "to": 1243957}, {"from": 454848, "to": 1037705}, {"from": 368891, "to": 1250777}, {"from": 119217, "to": 258463}, {"from": 99785, "to": 112641}, {"from": 119488, "to": 172495}, {"from": 1190080, "to": 2024544}, {"from": 119698, "to": 181875}, {"from": 139654, "to": 1065073}, {"from": 2024544, "to": 2935510}, {"from": 360486, "to": 6146586}, {"from": 405159, "to": 825232}, {"from": 450259, "to": 1375666}, {"from": 1457767, "to": 3065204}, {"from": 117060, "to": 369339}, {"from": 116282, "to": 887883}, {"from": 257044, "to": 1979376}, {"from": 360486, "to": 486822}, {"from": 6320628, "to": 10872600}, {"from": 496806, "to": 2713180}, {"from": 379786, "to": 1211837}, {"from": 1321
|
||
|
|
|
||
|
|
// adding nodes and edges to the graph
|
||
|
|
data = {nodes: nodes, edges: edges};
|
||
|
|
|
||
|
|
var options = {"nodes": {"shapeProperties": {"borderRadius": 11}}, "edges": {"color": {"inherit": true}, "font": {"size": 32}, "smooth": false}, "physics": {"forceAtlas2Based": {"gravitationalConstant": -443, "centralGravity": 0.005, "springLength": 255, "springConstant": 0.07, "damping": 0.91, "avoidOverlap": 0.06}, "maxVelocity": 57, "minVelocity": 0.75, "solver": "forceAtlas2Based"}};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
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>
|