Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vis-network@latest/styles/vis-network.css" type="text/css" /> | |
| <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vis-network@latest/dist/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: 700px; | |
| height: 700px; | |
| background-color: #ffffff; | |
| 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([{"color": "#00FF00", "id": "Napoleon", "label": "Napoleon", "shape": "circle"}, {"color": "#00FF00", "id": "French Revolution", "label": "French Revolution", "shape": "circle"}, {"color": "#00FF00", "id": "France", "label": "France", "shape": "circle"}]); | |
| edges = new vis.DataSet([{"arrows": "to", "from": "Napoleon", "label": "participant in", "title": "participant in", "to": "French Revolution"}, {"arrows": "to", "from": "French Revolution", "label": "participant", "title": "participant", "to": "Napoleon"}, {"arrows": "to", "from": "French Revolution", "label": "country", "title": "country", "to": "France"}]); | |
| // adding nodes and edges to the graph | |
| data = {nodes: nodes, edges: edges}; | |
| var options = { | |
| "configure": { | |
| "enabled": false | |
| }, | |
| "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 | |
| } | |
| } | |
| }; | |
| network = new vis.Network(container, data, options); | |
| return network; | |
| } | |
| drawGraph(); | |
| </script> | |
| </body> | |
| </html> |