Created
January 1, 2024 12:20
-
-
Save Lord-V15/0b9cacb6a93e11ace696f6007b1f5fa7 to your computer and use it in GitHub Desktop.
A knowledge graph idea using REBEL
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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: 1280; | |
height: 720; | |
background-color: #eeeeee; | |
border: 1px solid lightgray; | |
position: relative; | |
float: left; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="card" style="width: 100%"> | |
<div id="mynetwork" class="card-body"></div> | |
</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": "Security token", "label": "Security token", "shape": "circle"}, {"color": "#00FF00", "id": "Artificial intelligence", "label": "Artificial intelligence", "shape": "circle"}, {"color": "#00FF00", "id": "Cloud", "label": "Cloud", "shape": "circle"}, {"color": "#00FF00", "id": "Virtual private cloud", "label": "Virtual private cloud", "shape": "circle"}, {"color": "#00FF00", "id": "Amazon Web Services", "label": "Amazon Web Services", "shape": "circle"}, {"color": "#00FF00", "id": "Amazon S3", "label": "Amazon S3", "shape": "circle"}, {"color": "#00FF00", "id": "Database", "label": "Database", "shape": "circle"}, {"color": "#00FF00", "id": "Analytics", "label": "Analytics", "shape": "circle"}, {"color": "#00FF00", "id": "Bucket", "label": "Bucket", "shape": "circle"}, {"color": "#00FF00", "id": "Universal 2nd Factor", "label": "Universal 2nd Factor", "shape": "circle"}, {"color": "#00FF00", "id": "Machine learning", "label": "Machine learning", "shape": "circle"}, {"color": "#00FF00", "id": "Data lake", "label": "Data lake", "shape": "circle"}, {"color": "#00FF00", "id": "Cloud storage", "label": "Cloud storage", "shape": "circle"}, {"color": "#00FF00", "id": "Big data", "label": "Big data", "shape": "circle"}, {"color": "#00FF00", "id": "Container", "label": "Container", "shape": "circle"}, {"color": "#00FF00", "id": "Object storage", "label": "Object storage", "shape": "circle"}]); | |
edges = new vis.DataSet([{"arrows": "to", "from": "Amazon S3", "label": "instance of", "title": "instance of", "to": "Cloud"}, {"arrows": "to", "from": "Amazon S3", "label": "instance of", "title": "instance of", "to": "Database"}, {"arrows": "to", "from": "Amazon S3", "label": "part of", "title": "part of", "to": "Amazon S3"}, {"arrows": "to", "from": "Amazon S3", "label": "instance of", "title": "instance of", "to": "Object storage"}, {"arrows": "to", "from": "Amazon S3", "label": "use", "title": "use", "to": "Object storage"}, {"arrows": "to", "from": "Machine learning", "label": "part of", "title": "part of", "to": "Artificial intelligence"}, {"arrows": "to", "from": "Artificial intelligence", "label": "has part", "title": "has part", "to": "Machine learning"}, {"arrows": "to", "from": "Amazon S3", "label": "use", "title": "use", "to": "Big data"}, {"arrows": "to", "from": "Big data", "label": "subclass of", "title": "subclass of", "to": "Analytics"}, {"arrows": "to", "from": "Universal 2nd Factor", "label": "subclass of", "title": "subclass of", "to": "Security token"}, {"arrows": "to", "from": "Universal 2nd Factor", "label": "instance of", "title": "instance of", "to": "Security token"}, {"arrows": "to", "from": "Amazon S3", "label": "instance of", "title": "instance of", "to": "Data lake"}, {"arrows": "to", "from": "Amazon S3", "label": "use", "title": "use", "to": "Data lake"}, {"arrows": "to", "from": "Virtual private cloud", "label": "part of", "title": "part of", "to": "Amazon Web Services"}, {"arrows": "to", "from": "Amazon S3", "label": "instance of", "title": "instance of", "to": "Cloud storage"}, {"arrows": "to", "from": "Amazon S3", "label": "use", "title": "use", "to": "Cloud storage"}, {"arrows": "to", "from": "Bucket", "label": "subclass of", "title": "subclass of", "to": "Container"}, {"arrows": "to", "from": "Bucket", "label": "part of", "title": "part of", "to": "Amazon S3"}]); | |
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": 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment