lukefleed
/
imdb-graph
mirror of https://github.com/lukefleed/imdb-graph
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
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.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '20919eb58c'
${ noResults }
imdb-graph/visualization/imdb-graph.html

176 lines
556 KiB
HTML
Raw Normal View History Unescape Escape

visualization of the graph on a small set
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%;
better documentation
3 years ago
background-color: #1e1f29;
visualization of the graph on a small set
3 years ago
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>