Spaces:
Runtime error
Runtime error
File size: 9,267 Bytes
797a2e2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
<html>
<head>
<meta charset="utf-8">
<script src="lib/bindings/utils.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></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>-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"
></script>
<center>
<h1></h1>
</center>
<style type="text/css">
#mynetwork {
width: 700px;
height: 700px;
background-color: #ffffff;
border: 1px solid lightgray;
position: relative;
float: left;
}
#config {
float: left;
width: 400px;
height: 600px;
}
</style>
</head>
<body>
<div class="card" style="width: 100%">
<div id="mynetwork" class="card-body"></div>
</div>
<div id="config"></div>
<script type="text/javascript">
// initialize global variables.
var edges;
var nodes;
var allNodes;
var allEdges;
var nodeColors;
var originalNodes;
var network;
var container;
var options, data;
var filter = {
item : '',
property : '',
value : []
};
// 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([{"color": "#00FF00", "id": "Google", "label": "Google", "shape": "circle"}, {"color": "#00FF00", "id": "Alphabet", "label": "Alphabet", "shape": "circle"}, {"color": "#00FF00", "id": "Larry Page", "label": "Larry Page", "shape": "circle"}, {"color": "#00FF00", "id": "Stanford University", "label": "Stanford University", "shape": "circle"}, {"color": "#00FF00", "id": "Sergey Brin", "label": "Sergey Brin", "shape": "circle"}, {"color": "#00FF00", "id": "Sundar Pichai", "label": "Sundar Pichai", "shape": "circle"}, {"color": "#00FF00", "id": "Alphabet Inc.", "label": "Alphabet Inc.", "shape": "circle"}, {"color": "#00FF00", "id": "Google Search", "label": "Google Search", "shape": "circle"}, {"color": "#00FF00", "id": "Gmail", "label": "Gmail", "shape": "circle"}, {"color": "#00FF00", "id": "YouTube", "label": "YouTube", "shape": "circle"}, {"color": "#00FF00", "id": "Nest", "label": "Nest", "shape": "circle"}, {"color": "#00FF00", "id": "Pixel", "label": "Pixel", "shape": "circle"}, {"color": "#00FF00", "id": "Google Assistant", "label": "Google Assistant", "shape": "circle"}, {"color": "#00FF00", "id": "Artificial intelligence", "label": "Artificial intelligence", "shape": "circle"}, {"color": "#00FF00", "id": "Machine learning", "label": "Machine learning", "shape": "circle"}, {"color": "#00FF00", "id": "TensorFlow", "label": "TensorFlow", "shape": "circle"}, {"color": "#00FF00", "id": "Pixel Watch", "label": "Pixel Watch", "shape": "circle"}, {"color": "#00FF00", "id": "Fitbit", "label": "Fitbit", "shape": "circle"}, {"color": "#00FF00", "id": "Google Brain", "label": "Google Brain", "shape": "circle"}]);
edges = new vis.DataSet([{"arrows": "to", "from": "Google", "label": "parent organization", "title": "parent organization", "to": "Alphabet"}, {"arrows": "to", "from": "Google", "label": "founded by", "title": "founded by", "to": "Larry Page"}, {"arrows": "to", "from": "Alphabet", "label": "subsidiary", "title": "subsidiary", "to": "Google"}, {"arrows": "to", "from": "Alphabet", "label": "founded by", "title": "founded by", "to": "Larry Page"}, {"arrows": "to", "from": "Larry Page", "label": "educated at", "title": "educated at", "to": "Stanford University"}, {"arrows": "to", "from": "Sergey Brin", "label": "educated at", "title": "educated at", "to": "Stanford University"}, {"arrows": "to", "from": "Sundar Pichai", "label": "employer", "title": "employer", "to": "Google"}, {"arrows": "to", "from": "Google", "label": "parent organization", "title": "parent organization", "to": "Alphabet Inc."}, {"arrows": "to", "from": "Alphabet Inc.", "label": "subsidiary", "title": "subsidiary", "to": "Google"}, {"arrows": "to", "from": "Google Search", "label": "owned by", "title": "owned by", "to": "Alphabet"}, {"arrows": "to", "from": "Gmail", "label": "owned by", "title": "owned by", "to": "Alphabet"}, {"arrows": "to", "from": "YouTube", "label": "owned by", "title": "owned by", "to": "Alphabet"}, {"arrows": "to", "from": "Nest", "label": "developer", "title": "developer", "to": "Alphabet"}, {"arrows": "to", "from": "Pixel", "label": "manufacturer", "title": "manufacturer", "to": "Alphabet"}, {"arrows": "to", "from": "Nest", "label": "owned by", "title": "owned by", "to": "Alphabet"}, {"arrows": "to", "from": "Google Assistant", "label": "use", "title": "use", "to": "Artificial intelligence"}, {"arrows": "to", "from": "Machine learning", "label": "part of", "title": "part of", "to": "Artificial intelligence"}, {"arrows": "to", "from": "TensorFlow", "label": "use", "title": "use", "to": "Artificial intelligence"}, {"arrows": "to", "from": "Pixel Watch", "label": "connects with", "title": "connects with", "to": "Fitbit"}, {"arrows": "to", "from": "Fitbit", "label": "connects with", "title": "connects with", "to": "Pixel Watch"}, {"arrows": "to", "from": "Google", "label": "subsidiary", "title": "subsidiary", "to": "YouTube"}, {"arrows": "to", "from": "YouTube", "label": "parent organization", "title": "parent organization", "to": "Google"}, {"arrows": "to", "from": "YouTube", "label": "owned by", "title": "owned by", "to": "Google"}, {"arrows": "to", "from": "Google Brain", "label": "owned by", "title": "owned by", "to": "Google"}, {"arrows": "to", "from": "Google", "label": "owner of", "title": "owner of", "to": "Google Brain"}]);
nodeColors = {};
allNodes = nodes.get({ returnType: "Object" });
for (nodeId in allNodes) {
nodeColors[nodeId] = allNodes[nodeId].color;
}
allEdges = edges.get({ returnType: "Object" });
// adding nodes and edges to the graph
data = {nodes: nodes, edges: edges};
var options = {
"configure": {
"enabled": true,
"filter": [
"physics"
]
},
"edges": {
"color": {
"inherit": true
},
"smooth": {
"enabled": true,
"type": "dynamic"
}
},
"interaction": {
"dragNodes": true,
"hideEdgesOnDrag": false,
"hideNodesOnDrag": false
},
"physics": {
"enabled": true,
"repulsion": {
"centralGravity": 0.2,
"damping": 0.09,
"nodeDistance": 200,
"springConstant": 0.05,
"springLength": 200
},
"solver": "repulsion",
"stabilization": {
"enabled": true,
"fit": true,
"iterations": 1000,
"onlyDynamicEdges": false,
"updateInterval": 50
}
}
};
// if this network requires displaying the configure window,
// put it in its div
options.configure["container"] = document.getElementById("config");
network = new vis.Network(container, data, options);
return network;
}
drawGraph();
</script>
</body>
</html> |