Spaces:
Runtime error
Runtime error
| <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> |