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.
80 lines
36 KiB
HTML
80 lines
36 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id = "mynetwork"></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": 18, "label": "Kirk Douglas\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 24, "label": "John Gielgud\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 32, "label": "Charlton Heston\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 47, "label": "Sophia Loren\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 51, "label": "James Mason\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 52, "label": "Marcello Mastroianni\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 53, "label": "Robert Mitchum\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 57, "label": "David Niven\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 59, "label": "Laurence Olivier\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 63, "label": "Anthony Quinn\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 78, "label": "John Wayne\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 112, "label": "Pierce Brosnan\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 125, "label": "Sean Connery\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 172, "label": "Harvey Keitel\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 302, "label": "Jacqueline Bisset\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 308, "label": "Ernest Borgnine\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 323, "label": "Michael Caine\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 348, "label": "Tony Curtis\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 366, "label": "Catherine Deneuve\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 367, "label": "G\u00e9rard Depardieu\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 442, "label": "Rutger Hauer\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 454, "label": "Dennis Hopper\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 457, "label": "John Hurt\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 483, "label": "Christopher Lambert\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 489, "label": "Christopher Lee\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 514, "label": "Michael Madsen\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 532, "label": "Malcolm McDowell\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 554, "label": "Sam Neill\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 564, "label": "Peter O\u0027Toole\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 587, "label": "Donald Pleasence\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 603, "label": "Vanessa Redgrave\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 616, "label": "Eric Roberts\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 627, "label": "Greta Scacchi\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 661, "label": "Donald Sutherland\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 728, "label": "Mario Adorf\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 734, "label": "Eddie Albert\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 800, "label": "Armand Assante\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 842, "label": "Martin Balsam\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 919, "label": "Senta Berger\n", "shape": "dot", "size": 16.6759}, {"font": {"color": "white"}, "id": 1012, "label": "Claudia Car
|
||
|
|
edges = new vis.DataSet([{"from": 564, "to": 627}, {"from": 308, "to": 312575}, {"from": 51, "to": 1673}, {"from": 59, "to": 302}, {"from": 734, "to": 1285}, {"from": 473228, "to": 670964}, {"from": 1703, "to": 660327}, {"from": 442, "to": 457}, {"from": 728, "to": 514059}, {"from": 489, "to": 1868}, {"from": 24, "to": 627}, {"from": 63, "to": 5412}, {"from": 728, "to": 1884}, {"from": 59, "to": 603}, {"from": 63, "to": 564}, {"from": 564, "to": 603402}, {"from": 457, "to": 603}, {"from": 1285, "to": 2094}, {"from": 312575, "to": 601377}, {"from": 532, "to": 1698}, {"from": 514, "to": 1421}, {"from": 52, "to": 514059}, {"from": 323, "to": 1426}, {"from": 1036, "to": 1884}, {"from": 1648, "to": 681566}, {"from": 302, "to": 660327}, {"from": 125, "to": 1954}, {"from": 2027, "to": 106387}, {"from": 51, "to": 660327}, {"from": 367, "to": 6573}, {"from": 442, "to": 587}, {"from": 47, "to": 57}, {"from": 51, "to": 1012}, {"from": 323, "to": 7042}, {"from": 52, "to": 172}, {"from": 308, "to": 1428}, {"from": 1657, "to": 7042}, {"from": 51, "to": 603}, {"from": 514, "to": 5078}, {"from": 1428, "to": 626259}, {"from": 2094, "to": 148041}, {"from": 489, "to": 320760}, {"from": 919, "to": 2094}, {"from": 532, "to": 1657}, {"from": 112, "to": 1638}, {"from": 489, "to": 1207}, {"from": 5078, "to": 514059}, {"from": 564, "to": 1884}, {"from": 473228, "to": 704719}, {"from": 51, "to": 2027}, {"from": 432007, "to": 670964}, {"from": 52, "to": 302}, {"from": 51, "to": 59}, {"from": 148041, "to": 181305}, {"from": 1657, "to": 660327}, {"from": 1725, "to": 1934}, {"from": 603, "to": 661}, {"from": 47, "to": 106387}, {"from": 53, "to": 1417}, {"from": 2027, "to": 908919}, {"from": 616, "to": 1036}, {"from": 514, "to": 1016}, {"from": 1426, "to": 1884}, {"from": 312575, "to": 704719}, {"from": 616, "to": 627}, {"from": 47, "to": 52}, {"from": 728, "to": 181305}, {"from": 800, "to": 5412}, {"from": 1012, "to": 1768}, {"from": 18, "to": 919}, {"from": 59, "to": 63}, {"from": 489, "to": 106387}, {"from": 514, "to": 616}, {"from": 53, "to": 7042}, {"from": 919, "to": 312575}, {"from": 32, "to": 603}, {"from": 1036, "to": 181305}, {"from": 47, "to": 564}, {"from": 52, "to": 181305}, {"from": 603, "to": 1703}, {"from": 302, "to": 454}, {"from": 1428, "to": 148041}, {"from": 63, "to": 514059}, {"from": 1626, "to": 1703}, {"from": 59, "to": 1725}, {"from": 51, "to": 1128}, {"from": 489, "to": 564}, {"from": 1012, "to": 603402}, {"from": 366, "to": 320760}, {"from": 52, "to": 2094}, {"from": 1128, "to": 704719}, {"from": 367, "to": 1868}, {"from": 51, "to": 63}, {"from": 32, "to": 59}, {"from": 47, "to": 908919}, {"from": 63, "to": 172}, {"from": 53, "to": 1421}, {"from": 1036, "to": 362735}, {"from": 587, "to": 2145}, {"from": 1016, "to": 626259}, {"from": 181305, "to": 768334}, {"from": 172, "to": 554}, {"from": 454, "to": 704719}, {"from": 1417, "to": 1421}, {"from": 627, "to": 1638}, {"from": 1811, "to": 432007}, {"from": 661, "to": 1285}, {"from": 24, "to": 603}, {"from": 53, "to": 5078}, {"from": 18, "to": 1673}, {"from": 52, "to": 1159}, {"from": 2145, "to": 721073}, {"from": 47, "to": 2145}, {"from": 1626, "to": 1698}, {"from": 323, "to": 1811}, {"from": 32, "to": 454}, {"from": 308, "to": 1768}, {"from": 24, "to": 32}, {"from": 454, "to": 473228}, {"from": 1426, "to": 2027}, {"from": 1648, "to": 1811}, {"from": 302, "to": 1626}, {"from": 442, "to": 554}, {"from": 661, "to": 1159}, {"from": 51, "to": 1626}, {"from": 442, "to": 1884}, {"from": 24, "to": 59}, {"from": 51, "to": 323}, {"from": 53, "to": 1016}, {"from": 125, "to": 148041}, {"from": 47, "to": 51}, {"from": 1036, "to": 1725}, {"from": 1428, "to": 1673}, {"from": 323, "to": 1285}, {"from": 125, "to": 483}, {"from": 308, "to": 348}, {"from": 18, "to": 660327}, {"from": 626259, "to": 670964}, {"from": 1703, "to": 1868}, {"from": 1626, "to": 1657}, {"from": 1428, "to": 7042}, {"from": 32, "to": 1725}, {"from": 1698, "to": 5078}, {"from": 47, "to": 1884}, {"from": 1768, "to": 908919}, {"from": 919, "to": 601377}, {"from": 5412, "to": 721073}, {"from": 842, "to": 626259}, {"from
|
||
|
|
|
||
|
|
// adding nodes and edges to the graph
|
||
|
|
data = {nodes: nodes, edges: edges};
|
||
|
|
|
||
|
|
var options = {"nodes": {"borderWidthSelected": 3}, "edges": {"color": {"inherit": true}, "smooth": false}, "physics": {"repulsion": {"centralGravity": 8.95, "springLength": 500, "springConstant": 0.015, "nodeDistance": 600, "damping": 0.67}, "minVelocity": 0.75, "solver": "repulsion"}};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
network = new vis.Network(container, data, options);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
return network;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
drawGraph();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|