mirror of
https://github.com/fhswf/aki_prj23_transparenzregister.git
synced 2026-02-13 22:17:38 +01:00
V1 Verflechtungsanalyse
This commit is contained in:
1 parent
a9101aef2f
commit
64cc1041f7
10 files changed
+1757
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,12 @@
|
||||
id;label;type;branche
|
||||
1;Porsche Automobil Holding;Company;Automobilhersteller
|
||||
2;Volkswagen AG;Company;Automobilhersteller
|
||||
3;Volkswagen;Company;Automobilhersteller
|
||||
4;Audi;Company;Automobilhersteller
|
||||
5;Seat;Company;Automobilhersteller
|
||||
6;Skoda Auto;Company;Automobilhersteller
|
||||
7;Porsche AG;Company;Automobilhersteller
|
||||
8;Lamborghini;Company;Automobilhersteller
|
||||
9;Bentley;Company;Automobilhersteller
|
||||
10;Forvia;Company;Automobilzulieferer
|
||||
11;Hella;Company;Automobilzulieferer
|
||||
|
@@ -0,0 +1,180 @@
|
||||
<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: 100%;
|
||||
height: 600px;
|
||||
background-color: white;
|
||||
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([{"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 2, "label": "Volkswagen AG", "shape": "dot", "size": 0.0, "title": "Volkswagen AG\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 1, "label": "Porsche Automobil Holding", "shape": "dot", "size": 38.88888888888889, "title": "Porsche Automobil Holding\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 3, "label": "Volkswagen", "shape": "dot", "size": 0.0, "title": "Volkswagen\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 4, "label": "Audi", "shape": "dot", "size": 32.22222222222222, "title": "Audi\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 5, "label": "Seat", "shape": "dot", "size": 0.0, "title": "Seat\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 6, "label": "Skoda Auto", "shape": "dot", "size": 0.0, "title": "Skoda Auto\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 7, "label": "Porsche AG", "shape": "dot", "size": 0.0, "title": "Porsche AG\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 8, "label": "Lamborghini", "shape": "dot", "size": 0.0, "title": "Lamborghini\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 9, "label": "Bentley", "shape": "dot", "size": 0.0, "title": "Bentley\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilzulieferer", "color": "#475b63ff", "font": {"color": "black"}, "id": 10, "label": "Forvia", "shape": "dot", "size": 10.0, "title": "Forvia\nAutomobilzulieferer", "type": "Company"}, {"branche": "Automobilzulieferer", "color": "#475b63ff", "font": {"color": "black"}, "id": 11, "label": "Hella", "shape": "dot", "size": 0.0, "title": "Hella\nAutomobilzulieferer", "type": "Company"}]);
|
||||
edges = new vis.DataSet([{"from": 2, "label": "part_of", "to": 1, "width": 1}, {"from": 1, "label": "part_of", "to": 3, "width": 1}, {"from": 1, "label": "part_of", "to": 4, "width": 1}, {"from": 1, "label": "part_of", "to": 5, "width": 1}, {"from": 1, "label": "part_of", "to": 6, "width": 1}, {"from": 1, "label": "part_of", "to": 7, "width": 1}, {"from": 4, "label": "part_of", "to": 8, "width": 1}, {"from": 4, "label": "part_of", "to": 9, "width": 1}, {"from": 4, "label": "supplierer", "to": 10, "width": 1}, {"from": 11, "label": "part_of", "to": 10, "width": 1}]);
|
||||
|
||||
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": false
|
||||
},
|
||||
"smooth": {
|
||||
"enabled": true,
|
||||
"type": "dynamic"
|
||||
}
|
||||
},
|
||||
"interaction": {
|
||||
"dragNodes": true,
|
||||
"hideEdgesOnDrag": false,
|
||||
"hideNodesOnDrag": false
|
||||
},
|
||||
"physics": {
|
||||
"enabled": true,
|
||||
"repulsion": {
|
||||
"centralGravity": 0.2,
|
||||
"damping": 0.09,
|
||||
"nodeDistance": 150,
|
||||
"springConstant": 0.05,
|
||||
"springLength": 50
|
||||
},
|
||||
"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);
|
||||
|
||||
|
||||
network.on("click", neighbourhoodHighlight);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return network;
|
||||
|
||||
}
|
||||
drawGraph();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,180 @@
|
||||
<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: 100%;
|
||||
height: 600px;
|
||||
background-color: white;
|
||||
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([{"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 2, "label": "Volkswagen AG", "shape": "dot", "size": 20.833333333333336, "title": "Volkswagen AG\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 1, "label": "Porsche Automobil Holding", "shape": "dot", "size": 33.33333333333333, "title": "Porsche Automobil Holding\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 3, "label": "Volkswagen", "shape": "dot", "size": 20.833333333333336, "title": "Volkswagen\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 4, "label": "Audi", "shape": "dot", "size": 31.25, "title": "Audi\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 5, "label": "Seat", "shape": "dot", "size": 20.833333333333336, "title": "Seat\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 6, "label": "Skoda Auto", "shape": "dot", "size": 20.833333333333336, "title": "Skoda Auto\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 7, "label": "Porsche AG", "shape": "dot", "size": 20.833333333333336, "title": "Porsche AG\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 8, "label": "Lamborghini", "shape": "dot", "size": 20.0, "title": "Lamborghini\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 9, "label": "Bentley", "shape": "dot", "size": 20.0, "title": "Bentley\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilzulieferer", "color": "#475b63ff", "font": {"color": "black"}, "id": 10, "label": "Forvia", "shape": "dot", "size": 21.73913043478261, "title": "Forvia\nAutomobilzulieferer", "type": "Company"}, {"branche": "Automobilzulieferer", "color": "#475b63ff", "font": {"color": "black"}, "id": 11, "label": "Hella", "shape": "dot", "size": 15.625, "title": "Hella\nAutomobilzulieferer", "type": "Company"}]);
|
||||
edges = new vis.DataSet([{"from": 2, "label": "part_of", "to": 1, "width": 1}, {"from": 1, "label": "part_of", "to": 3, "width": 1}, {"from": 1, "label": "part_of", "to": 4, "width": 1}, {"from": 1, "label": "part_of", "to": 5, "width": 1}, {"from": 1, "label": "part_of", "to": 6, "width": 1}, {"from": 1, "label": "part_of", "to": 7, "width": 1}, {"from": 4, "label": "part_of", "to": 8, "width": 1}, {"from": 4, "label": "part_of", "to": 9, "width": 1}, {"from": 4, "label": "supplierer", "to": 10, "width": 1}, {"from": 11, "label": "part_of", "to": 10, "width": 1}]);
|
||||
|
||||
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": false
|
||||
},
|
||||
"smooth": {
|
||||
"enabled": true,
|
||||
"type": "dynamic"
|
||||
}
|
||||
},
|
||||
"interaction": {
|
||||
"dragNodes": true,
|
||||
"hideEdgesOnDrag": false,
|
||||
"hideNodesOnDrag": false
|
||||
},
|
||||
"physics": {
|
||||
"enabled": true,
|
||||
"repulsion": {
|
||||
"centralGravity": 0.2,
|
||||
"damping": 0.09,
|
||||
"nodeDistance": 150,
|
||||
"springConstant": 0.05,
|
||||
"springLength": 50
|
||||
},
|
||||
"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);
|
||||
|
||||
|
||||
network.on("click", neighbourhoodHighlight);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return network;
|
||||
|
||||
}
|
||||
drawGraph();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,180 @@
|
||||
<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: 100%;
|
||||
height: 600px;
|
||||
background-color: white;
|
||||
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([{"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 2, "label": "Volkswagen AG", "shape": "dot", "size": 5.0, "title": "Volkswagen AG\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 1, "label": "Porsche Automobil Holding", "shape": "dot", "size": 30.000000000000004, "title": "Porsche Automobil Holding\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 3, "label": "Volkswagen", "shape": "dot", "size": 5.0, "title": "Volkswagen\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 4, "label": "Audi", "shape": "dot", "size": 20.0, "title": "Audi\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 5, "label": "Seat", "shape": "dot", "size": 5.0, "title": "Seat\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 6, "label": "Skoda Auto", "shape": "dot", "size": 5.0, "title": "Skoda Auto\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 7, "label": "Porsche AG", "shape": "dot", "size": 5.0, "title": "Porsche AG\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 8, "label": "Lamborghini", "shape": "dot", "size": 5.0, "title": "Lamborghini\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 9, "label": "Bentley", "shape": "dot", "size": 5.0, "title": "Bentley\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilzulieferer", "color": "#475b63ff", "font": {"color": "black"}, "id": 10, "label": "Forvia", "shape": "dot", "size": 10.0, "title": "Forvia\nAutomobilzulieferer", "type": "Company"}, {"branche": "Automobilzulieferer", "color": "#475b63ff", "font": {"color": "black"}, "id": 11, "label": "Hella", "shape": "dot", "size": 5.0, "title": "Hella\nAutomobilzulieferer", "type": "Company"}]);
|
||||
edges = new vis.DataSet([{"from": 2, "label": "part_of", "to": 1, "width": 1}, {"from": 1, "label": "part_of", "to": 3, "width": 1}, {"from": 1, "label": "part_of", "to": 4, "width": 1}, {"from": 1, "label": "part_of", "to": 5, "width": 1}, {"from": 1, "label": "part_of", "to": 6, "width": 1}, {"from": 1, "label": "part_of", "to": 7, "width": 1}, {"from": 4, "label": "part_of", "to": 8, "width": 1}, {"from": 4, "label": "part_of", "to": 9, "width": 1}, {"from": 4, "label": "supplierer", "to": 10, "width": 1}, {"from": 11, "label": "part_of", "to": 10, "width": 1}]);
|
||||
|
||||
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": false
|
||||
},
|
||||
"smooth": {
|
||||
"enabled": true,
|
||||
"type": "dynamic"
|
||||
}
|
||||
},
|
||||
"interaction": {
|
||||
"dragNodes": true,
|
||||
"hideEdgesOnDrag": false,
|
||||
"hideNodesOnDrag": false
|
||||
},
|
||||
"physics": {
|
||||
"enabled": true,
|
||||
"repulsion": {
|
||||
"centralGravity": 0.2,
|
||||
"damping": 0.09,
|
||||
"nodeDistance": 150,
|
||||
"springConstant": 0.05,
|
||||
"springLength": 50
|
||||
},
|
||||
"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);
|
||||
|
||||
|
||||
network.on("click", neighbourhoodHighlight);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return network;
|
||||
|
||||
}
|
||||
drawGraph();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,180 @@
|
||||
<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: 100%;
|
||||
height: 600px;
|
||||
background-color: white;
|
||||
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([{"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 2, "label": "Volkswagen AG", "shape": "dot", "size": 10, "title": "Volkswagen AG\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 1, "label": "Porsche Automobil Holding", "shape": "dot", "size": 10, "title": "Porsche Automobil Holding\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 3, "label": "Volkswagen", "shape": "dot", "size": 10, "title": "Volkswagen\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 4, "label": "Audi", "shape": "dot", "size": 10, "title": "Audi\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 5, "label": "Seat", "shape": "dot", "size": 10, "title": "Seat\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 6, "label": "Skoda Auto", "shape": "dot", "size": 10, "title": "Skoda Auto\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 7, "label": "Porsche AG", "shape": "dot", "size": 10, "title": "Porsche AG\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 8, "label": "Lamborghini", "shape": "dot", "size": 10, "title": "Lamborghini\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 9, "label": "Bentley", "shape": "dot", "size": 10, "title": "Bentley\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilzulieferer", "color": "#475b63ff", "font": {"color": "black"}, "id": 10, "label": "Forvia", "shape": "dot", "size": 10, "title": "Forvia\nAutomobilzulieferer", "type": "Company"}, {"branche": "Automobilzulieferer", "color": "#475b63ff", "font": {"color": "black"}, "id": 11, "label": "Hella", "shape": "dot", "size": 10, "title": "Hella\nAutomobilzulieferer", "type": "Company"}]);
|
||||
edges = new vis.DataSet([{"from": 2, "label": "part_of", "to": 1, "width": 1}, {"from": 1, "label": "part_of", "to": 3, "width": 1}, {"from": 1, "label": "part_of", "to": 4, "width": 1}, {"from": 1, "label": "part_of", "to": 5, "width": 1}, {"from": 1, "label": "part_of", "to": 6, "width": 1}, {"from": 1, "label": "part_of", "to": 7, "width": 1}, {"from": 4, "label": "part_of", "to": 8, "width": 1}, {"from": 4, "label": "part_of", "to": 9, "width": 1}, {"from": 4, "label": "supplierer", "to": 10, "width": 1}, {"from": 11, "label": "part_of", "to": 10, "width": 1}]);
|
||||
|
||||
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": false
|
||||
},
|
||||
"smooth": {
|
||||
"enabled": true,
|
||||
"type": "dynamic"
|
||||
}
|
||||
},
|
||||
"interaction": {
|
||||
"dragNodes": true,
|
||||
"hideEdgesOnDrag": false,
|
||||
"hideNodesOnDrag": false
|
||||
},
|
||||
"physics": {
|
||||
"enabled": true,
|
||||
"repulsion": {
|
||||
"centralGravity": 0.2,
|
||||
"damping": 0.09,
|
||||
"nodeDistance": 150,
|
||||
"springConstant": 0.05,
|
||||
"springLength": 50
|
||||
},
|
||||
"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);
|
||||
|
||||
|
||||
network.on("click", neighbourhoodHighlight);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return network;
|
||||
|
||||
}
|
||||
drawGraph();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+180
@@ -0,0 +1,180 @@
|
||||
<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: 100%;
|
||||
height: 600px;
|
||||
background-color: white;
|
||||
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([{"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 2, "label": "Volkswagen AG", "shape": "dot", "size": 12.085168885235912, "title": "Volkswagen AG\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 1, "label": "Porsche Automobil Holding", "shape": "dot", "size": 31.651963273829274, "title": "Porsche Automobil Holding\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 3, "label": "Volkswagen", "shape": "dot", "size": 12.085168885235912, "title": "Volkswagen\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 4, "label": "Audi", "shape": "dot", "size": 22.4729492814132, "title": "Audi\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 5, "label": "Seat", "shape": "dot", "size": 12.085168885235912, "title": "Seat\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 6, "label": "Skoda Auto", "shape": "dot", "size": 12.085168885235912, "title": "Skoda Auto\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 7, "label": "Porsche AG", "shape": "dot", "size": 12.085168885235912, "title": "Porsche AG\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 8, "label": "Lamborghini", "shape": "dot", "size": 8.580550319284578, "title": "Lamborghini\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 9, "label": "Bentley", "shape": "dot", "size": 8.580550319284578, "title": "Bentley\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilzulieferer", "color": "#475b63ff", "font": {"color": "black"}, "id": 10, "label": "Forvia", "shape": "dot", "size": 10.044975527879851, "title": "Forvia\nAutomobilzulieferer", "type": "Company"}, {"branche": "Automobilzulieferer", "color": "#475b63ff", "font": {"color": "black"}, "id": 11, "label": "Hella", "shape": "dot", "size": 3.835363824276235, "title": "Hella\nAutomobilzulieferer", "type": "Company"}]);
|
||||
edges = new vis.DataSet([{"from": 2, "label": "part_of", "to": 1, "width": 1}, {"from": 1, "label": "part_of", "to": 3, "width": 1}, {"from": 1, "label": "part_of", "to": 4, "width": 1}, {"from": 1, "label": "part_of", "to": 5, "width": 1}, {"from": 1, "label": "part_of", "to": 6, "width": 1}, {"from": 1, "label": "part_of", "to": 7, "width": 1}, {"from": 4, "label": "part_of", "to": 8, "width": 1}, {"from": 4, "label": "part_of", "to": 9, "width": 1}, {"from": 4, "label": "supplierer", "to": 10, "width": 1}, {"from": 11, "label": "part_of", "to": 10, "width": 1}]);
|
||||
|
||||
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": false
|
||||
},
|
||||
"smooth": {
|
||||
"enabled": true,
|
||||
"type": "dynamic"
|
||||
}
|
||||
},
|
||||
"interaction": {
|
||||
"dragNodes": true,
|
||||
"hideEdgesOnDrag": false,
|
||||
"hideNodesOnDrag": false
|
||||
},
|
||||
"physics": {
|
||||
"enabled": true,
|
||||
"repulsion": {
|
||||
"centralGravity": 0.2,
|
||||
"damping": 0.09,
|
||||
"nodeDistance": 150,
|
||||
"springConstant": 0.05,
|
||||
"springLength": 50
|
||||
},
|
||||
"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);
|
||||
|
||||
|
||||
network.on("click", neighbourhoodHighlight);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return network;
|
||||
|
||||
}
|
||||
drawGraph();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,180 @@
|
||||
<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: 100%;
|
||||
height: 600px;
|
||||
background-color: white;
|
||||
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([{"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 2, "label": "Volkswagen AG", "shape": "dot", "size": 2.6656522175918687, "title": "Volkswagen AG\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 1, "label": "Porsche Automobil Holding", "shape": "dot", "size": 14.003687099537842, "title": "Porsche Automobil Holding\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 3, "label": "Volkswagen", "shape": "dot", "size": 2.6656522175918687, "title": "Volkswagen\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 4, "label": "Audi", "shape": "dot", "size": 9.377492579893957, "title": "Audi\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 5, "label": "Seat", "shape": "dot", "size": 2.6656522175918687, "title": "Seat\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 6, "label": "Skoda Auto", "shape": "dot", "size": 2.6656522175918687, "title": "Skoda Auto\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 7, "label": "Porsche AG", "shape": "dot", "size": 2.6656522175918687, "title": "Porsche AG\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 8, "label": "Lamborghini", "shape": "dot", "size": 2.6745569912566833, "title": "Lamborghini\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilhersteller", "color": " #729b79ff", "font": {"color": "black"}, "id": 9, "label": "Bentley", "shape": "dot", "size": 2.6745569912566833, "title": "Bentley\nAutomobilhersteller", "type": "Company"}, {"branche": "Automobilzulieferer", "color": "#475b63ff", "font": {"color": "black"}, "id": 10, "label": "Forvia", "shape": "dot", "size": 5.094490318776964, "title": "Forvia\nAutomobilzulieferer", "type": "Company"}, {"branche": "Automobilzulieferer", "color": "#475b63ff", "font": {"color": "black"}, "id": 11, "label": "Hella", "shape": "dot", "size": 2.846954931318525, "title": "Hella\nAutomobilzulieferer", "type": "Company"}]);
|
||||
edges = new vis.DataSet([{"from": 2, "label": "part_of", "to": 1, "width": 1}, {"from": 1, "label": "part_of", "to": 3, "width": 1}, {"from": 1, "label": "part_of", "to": 4, "width": 1}, {"from": 1, "label": "part_of", "to": 5, "width": 1}, {"from": 1, "label": "part_of", "to": 6, "width": 1}, {"from": 1, "label": "part_of", "to": 7, "width": 1}, {"from": 4, "label": "part_of", "to": 8, "width": 1}, {"from": 4, "label": "part_of", "to": 9, "width": 1}, {"from": 4, "label": "supplierer", "to": 10, "width": 1}, {"from": 11, "label": "part_of", "to": 10, "width": 1}]);
|
||||
|
||||
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": false
|
||||
},
|
||||
"smooth": {
|
||||
"enabled": true,
|
||||
"type": "dynamic"
|
||||
}
|
||||
},
|
||||
"interaction": {
|
||||
"dragNodes": true,
|
||||
"hideEdgesOnDrag": false,
|
||||
"hideNodesOnDrag": false
|
||||
},
|
||||
"physics": {
|
||||
"enabled": true,
|
||||
"repulsion": {
|
||||
"centralGravity": 0.2,
|
||||
"damping": 0.09,
|
||||
"nodeDistance": 150,
|
||||
"springConstant": 0.05,
|
||||
"springLength": 50
|
||||
},
|
||||
"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);
|
||||
|
||||
|
||||
network.on("click", neighbourhoodHighlight);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return network;
|
||||
|
||||
}
|
||||
drawGraph();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+654
@@ -0,0 +1,654 @@
|
||||
{
|
||||
"cells": [
|
||||
{
|
||||
"attachments": {},
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"# Networkx und Pyvis - Minimal Working Example"
|
||||
]
|
||||
},
|
||||
{
|
||||
"attachments": {},
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Referenzen: \n",
|
||||
"- [Networkx Dokumentation](https://networkx.org/documentation/stable/)\n",
|
||||
"- [Pyvis Dokumentation](https://pyvis.readthedocs.io/en/latest/index.html)\n",
|
||||
"- [Introduction to Python for Humanists](https://python-textbook.pythonhumanities.com/06_sna/06_01_05_networkx_pyvis.html)\n",
|
||||
"\n",
|
||||
"\n",
|
||||
"Networkx ist eine Python Bibliothek zur Erstellung und Analyse von Netzwerken. Pyvis ist eine Python Bibliothek zur interaktiven Visualisierung von Netzwerkgraphen. Beide können mit `pip` installiert werden. "
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 7,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"Requirement already satisfied: networkx in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (3.0)\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "stderr",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"\n",
|
||||
"[notice] A new release of pip is available: 23.1.1 -> 23.1.2\n",
|
||||
"[notice] To update, run: python.exe -m pip install --upgrade pip\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"Requirement already satisfied: pyvis in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (0.3.2)\n",
|
||||
"Requirement already satisfied: ipython>=5.3.0 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from pyvis) (8.4.0)\n",
|
||||
"Requirement already satisfied: jinja2>=2.9.6 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from pyvis) (3.1.2)\n",
|
||||
"Requirement already satisfied: jsonpickle>=1.4.1 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from pyvis) (3.0.1)\n",
|
||||
"Requirement already satisfied: networkx>=1.11 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from pyvis) (3.0)\n",
|
||||
"Requirement already satisfied: backcall in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from ipython>=5.3.0->pyvis) (0.2.0)\n",
|
||||
"Requirement already satisfied: decorator in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from ipython>=5.3.0->pyvis) (5.1.1)\n",
|
||||
"Requirement already satisfied: jedi>=0.16 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from ipython>=5.3.0->pyvis) (0.18.1)\n",
|
||||
"Requirement already satisfied: matplotlib-inline in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from ipython>=5.3.0->pyvis) (0.1.3)\n",
|
||||
"Requirement already satisfied: pickleshare in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from ipython>=5.3.0->pyvis) (0.7.5)\n",
|
||||
"Requirement already satisfied: prompt-toolkit!=3.0.0,!=3.0.1,<3.1.0,>=2.0.0 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from ipython>=5.3.0->pyvis) (3.0.30)\n",
|
||||
"Requirement already satisfied: pygments>=2.4.0 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from ipython>=5.3.0->pyvis) (2.12.0)\n",
|
||||
"Requirement already satisfied: setuptools>=18.5 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from ipython>=5.3.0->pyvis) (58.1.0)\n",
|
||||
"Requirement already satisfied: stack-data in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from ipython>=5.3.0->pyvis) (0.3.0)\n",
|
||||
"Requirement already satisfied: traitlets>=5 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from ipython>=5.3.0->pyvis) (5.7.1)\n",
|
||||
"Requirement already satisfied: colorama in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from ipython>=5.3.0->pyvis) (0.4.5)\n",
|
||||
"Requirement already satisfied: MarkupSafe>=2.0 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from jinja2>=2.9.6->pyvis) (2.1.1)\n",
|
||||
"Requirement already satisfied: parso<0.9.0,>=0.8.0 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from jedi>=0.16->ipython>=5.3.0->pyvis) (0.8.3)\n",
|
||||
"Requirement already satisfied: wcwidth in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from prompt-toolkit!=3.0.0,!=3.0.1,<3.1.0,>=2.0.0->ipython>=5.3.0->pyvis) (0.2.5)\n",
|
||||
"Requirement already satisfied: executing in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from stack-data->ipython>=5.3.0->pyvis) (0.8.3)\n",
|
||||
"Requirement already satisfied: asttokens in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from stack-data->ipython>=5.3.0->pyvis) (2.0.5)\n",
|
||||
"Requirement already satisfied: pure-eval in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from stack-data->ipython>=5.3.0->pyvis) (0.2.2)\n",
|
||||
"Requirement already satisfied: six in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from asttokens->stack-data->ipython>=5.3.0->pyvis) (1.16.0)\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "stderr",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"\n",
|
||||
"[notice] A new release of pip is available: 23.1.1 -> 23.1.2\n",
|
||||
"[notice] To update, run: python.exe -m pip install --upgrade pip\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"# install networkx and pyvis using pip\n",
|
||||
"!pip install networkx\n",
|
||||
"!pip install pyvis"
|
||||
]
|
||||
},
|
||||
{
|
||||
"attachments": {},
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"## Panda Dataframe mit Beispieldaten\n",
|
||||
"\n",
|
||||
"Um ein Netzwerk aufbauen zu können, brauchen wir Daten für die Knoten (nodes) und Kanten (edges). Die Daten speichern wir jeweils in einem Panda Dataframe. Pandas kann ebenfalls mit `pip` installiert werden. "
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 2,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"Requirement already satisfied: pandas in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (1.4.3)\n",
|
||||
"Requirement already satisfied: python-dateutil>=2.8.1 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from pandas) (2.8.2)\n",
|
||||
"Requirement already satisfied: pytz>=2020.1 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from pandas) (2022.1)\n",
|
||||
"Requirement already satisfied: numpy>=1.18.5 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from pandas) (1.23.0)\n",
|
||||
"Requirement already satisfied: six>=1.5 in c:\\users\\tim\\appdata\\local\\programs\\python\\python39\\lib\\site-packages (from python-dateutil>=2.8.1->pandas) (1.16.0)\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "stderr",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"\n",
|
||||
"[notice] A new release of pip is available: 23.1.1 -> 23.1.2\n",
|
||||
"[notice] To update, run: python.exe -m pip install --upgrade pip\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"# install pandas using pip\n",
|
||||
"!pip install pandas"
|
||||
]
|
||||
},
|
||||
{
|
||||
"attachments": {},
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Die Knoten unseres Netzwerks sollen die Unternehmen und Personen darstellen. Eine `id` ermöglicht die eindeutige Identifizierung eines Knoten und hilft Duplikate zu vermeiden. Um Unternehmen von Personen differenzieren zu können, wurde zusätzlich die Information `type` aufgenommen. Sie dient in unserem Beispiel dazu, die Form des Knoten zu bestimmen. Durch `label` bekommt der Knoten eine für den User verständliche Bezeichnung. Weitere Informationen, wie zum Beispiel `branche`, können später für das Mouse Over oder die Größe oder Farbe der Knoten verwendet werden. \n",
|
||||
"\n",
|
||||
"Um in einem späteren Schritt die Attribute der Knoten an das Netzwerk zu übergeben, generieren wir zusätzlich eine Spalte `shape`, eine Spalte `color` und eine Spalte `title`."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 22,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
" id label type branche shape \\\n",
|
||||
"0 1 Porsche Automobil Holding Company Automobilhersteller dot \n",
|
||||
"1 2 Volkswagen AG Company Automobilhersteller dot \n",
|
||||
"2 3 Volkswagen Company Automobilhersteller dot \n",
|
||||
"3 4 Audi Company Automobilhersteller dot \n",
|
||||
"4 5 Seat Company Automobilhersteller dot \n",
|
||||
"\n",
|
||||
" color title \n",
|
||||
"0 #729b79ff Porsche Automobil Holding\\nAutomobilhersteller \n",
|
||||
"1 #729b79ff Volkswagen AG\\nAutomobilhersteller \n",
|
||||
"2 #729b79ff Volkswagen\\nAutomobilhersteller \n",
|
||||
"3 #729b79ff Audi\\nAutomobilhersteller \n",
|
||||
"4 #729b79ff Seat\\nAutomobilhersteller \n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"# import pandas\n",
|
||||
"import pandas as pd\n",
|
||||
"\n",
|
||||
"# create dataframe based on the sample data\n",
|
||||
"df_nodes = pd.read_csv('companies.csv', sep = ';')\n",
|
||||
"\n",
|
||||
"# define shape based on the type\n",
|
||||
"node_shape = {'Company': 'dot', 'Person': 'triangle'}\n",
|
||||
"df_nodes['shape'] = df_nodes['type'].map(node_shape)\n",
|
||||
"\n",
|
||||
"# define color based on branche\n",
|
||||
"node_color = {'Automobilhersteller': ' #729b79ff', 'Automobilzulieferer': '#475b63ff', 'Branche 3': '#f3e8eeff', 'Branche 4': '#bacdb0ff', 'Branche 5': '#2e2c2fff'}\n",
|
||||
"df_nodes['color'] = df_nodes['branche'].map(node_color)\n",
|
||||
"\n",
|
||||
"# add information column that can be used for the mouse over in the graph\n",
|
||||
"df_nodes = df_nodes.fillna('')\n",
|
||||
"df_nodes['title'] = df_nodes['label'] + '\\n' + df_nodes['branche']\n",
|
||||
"\n",
|
||||
"# show first five entries of the dataframe\n",
|
||||
"print(df_nodes.head())"
|
||||
]
|
||||
},
|
||||
{
|
||||
"attachments": {},
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Die Kanten visualisieren die Beziehungen zwischen den Unternehmen und Personen. Um in Pyvis eine Kante darzustellen braucht es minimal die Information zwischen welchen beiden Knoten eine Kante dargestellt werden soll. In den Beispieldaten entspricht dies `from` und `to`. Es wird jeweils auf die eindeutige `id` der jeweiligen Knoten referenziert. `label` bezeichnet hier die Art der Beziehung, z.B. AR = Aufsichtsrat. "
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 23,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
" from to label\n",
|
||||
"0 2 1 part_of\n",
|
||||
"1 3 1 part_of\n",
|
||||
"2 4 1 part_of\n",
|
||||
"3 5 1 part_of\n",
|
||||
"4 6 1 part_of\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"# create dataframe based on the sample data\n",
|
||||
"df_edges = pd.read_csv('relations.csv', sep = ';')\n",
|
||||
"\n",
|
||||
"# show first five entries of the dataframe\n",
|
||||
"print(df_edges.head())"
|
||||
]
|
||||
},
|
||||
{
|
||||
"attachments": {},
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"## Erstellung eines Netzwerks mit networkx\n",
|
||||
"\n",
|
||||
"Zur Erstellung des Netzwerks nutzen wir `networkx`, da diese Bibliothek bessere Analysemöglichkeiten hat als `pyvis`. Das mit `networkx` erstellte Netzwerk können wir später an `pyvis` zur interaktiven Visualisierung übergeben werden. \n",
|
||||
"\n",
|
||||
"Wir erstellen die Knoten und Kanten auf Basis unsere beiden Dataframes."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 60,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"image/png": "iVBORw0KGgoAAAANSUhEUgAAA1gAAANYCAYAAADZn0yoAAAAOXRFWHRTb2Z0d2FyZQBNYXRwbG90bGliIHZlcnNpb24zLjUuMiwgaHR0cHM6Ly9tYXRwbG90bGliLm9yZy8qNh9FAAAACXBIWXMAAAsTAAALEwEAmpwYAAB7LklEQVR4nO3deZyP9f7/8ednhtlknUF2iZKyZC/JVp1UfOtEjPpWZJsoa6LldEj1tVXI0nYsdSwRhXROcigVEWVJixGJkaOxDbMZc/3+uMb8pJmYmc/n876uz/W4327nRsNc19MpM5/n5/V+vy+fZVmWAAAAAABFFmY6AAAAAACECgoWAAAAAPgJBQsAAAAA/ISCBQAAAAB+QsECAAAAAD+hYAEAAACAn1CwAAB/cOjQIfXo0UO1atVSkyZNdN1112np0qV+u37NmjX122+/Ffrzf/jhB7Vt21aNGjXSVVddpb59+0qSZs+erYEDB/orJgAABVbMdAAAgLNYlqU777xTDzzwgObNmydJ+vnnn7Vs2bI//N6srCwVKxb8byWPPvqohgwZov/5n/+RJG3fvj3oGQAAyAsTLADA7/znP/9RRESE+vfvn/uxGjVq6JFHHpFkT4k6d+6s9u3bq0OHDjp58qQ6dOigxo0bq379+nr//fclSXv37lXdunV177336qqrrlKXLl2Umpqae82pU6fmfs73339foIwHDx5U1apVc/+5fv36uT9PSkrSrbfeqjp16mjEiBG5H09ISFDTpk119dVX65lnnsn9eM2aNTVixAjVr19fzZs3V2JioiTp8OHDuvvuu9WsWTM1a9ZMn3/+uSTpk08+UaNGjdSoUSNde+21SklJKVB2AEBoo2ABAH7n22+/VePGjf/092zZskWLFy/WJ598oqioKC1dulRbtmzRmjVrNGzYMFmWJcleyvfwww/ru+++U6lSpTR9+vTca8TFxWnLli1KSEjQxIkTC5RxyJAhat++vTp27KiXXnpJx44dy/21b775RgsXLtT27du1cOFC/fLLL5Kk5557Tl999ZW2bdumTz75RNu2bcv9nNKlS2v79u0aOHCgBg8eLEkaNGiQhgwZok2bNundd99V7969JUkTJ07UtGnT9M0332jdunWKjo4uUHYAQGijYAEA/tSAAQPUsGFDNWvWLPdjN998s8qVKyfJXlL4xBNPqEGDBrrpppt04MABHTp0SJJUrVo1tWrVSpJ033336bPPPsu9xl//+ldJUpMmTbR3794CZerZs6e+++47de3aVWvXrlXLli2VkZEhSerQoYNKly6tqKgo1atXTz///LMk6Z133lHjxo117bXX6ttvv9XOnTtzrxcfH5/74/r16yVJH3/8sQYOHKhGjRqpc+fOOnHihE6ePKlWrVpp6NChmjJlio4dO2ZkiSQAwLkoWACA37n66qu1ZcuW3H+eNm2aVq9ercOHD+d+rESJErk//+c//6nDhw9r8+bN+uabb1SxYkWlp6dLknw+3++ufe4/R0ZGSpLCw8OVlZX1hxw9e/ZUo0aNdNttt+WZs3LlyurVq5fef/99FStWTDt27Pjddc+99p49ezRx4kStXr1a27Zt0+23356b8fxcZ3+enZ2tDRs26JtvvtE333yjAwcO6JJLLtHIkSP1xhtvKC0tTa1atSrw8kYAQGijYAEAfqd9+/ZKT0/XjBkzcj927t6p8x0/flwVKlRQ8eLFtWbNmtyJkSTt27cvdyI0b9483XDDDRedY9asWfrmm2+0cuXKP/zav/71L50+fVqS9Ouvvyo5OVlVqlTJ91onTpxQiRIlVLp0aR06dEgffvjh73594cKFuT9ed911kqRbbrlFU6dOzf0933zzjSRp9+7dql+/vh5//HE1a9aMggUA+B3WNQAAfsfn8+m9997TkCFDNH78eJUvX14lSpTQuHHj8vz99957rzp16qT69euradOmqlu3bu6vXXnllZo2bZp69eqlevXqKSEhwS8ZP/roIw0aNEhRUVGSpAkTJujSSy/N9/c3bNhQ1157rerWrfu7ZYtnHT16VA0aNFBkZKTmz58vSZoyZYoGDBigBg0aKCsrSzfeeKNmzpypl19+WWvWrFFYWJiuvvpqdezY0S9/JgBAaPBZZ3ciAwDgR3v37tUdd9yRu3TPqWrWrKmvvvpKcXFxpqMAAEIASwQBAAAAwE+YYAEAAACAnzDBAgAAAAA/oWABAAAAgJ9QsAAAAADATyhYAAAAAOAnFCwAAAAA8BMKFgAAAAD4CQULAAAAAPyEggUAAAAAfkLBAgAAAAA/oWABAAAAgJ9QsAAAAADATyhYAAAAAOAnFCwAAAAA8BMKFgAAAAD4CQULAAAAAPyEggUAAAAAfkLBAgAAAAA/oWABAAAAgJ9QsAAAAADATyhYAAAAAOAnFCwAAAAA8BMKFgAAAAD4CQULAAAAAPyEggUAAAAAfkLBAgAAAAA/oWABAAAAgJ9QsAAAAADATyhYAAAAAOAnFCwAAAAA8BMKFgAAAAD4CQULAAAAAPyEggUAAAAAfkLBAgAAAAA/oWABAAAAgJ9QsAAAAADATyhYAAAAAOAnFCwAAAAA8BMKFgAAAAD4CQULAAAAAPyEggUAAAAAfkLBAgAAAAA/oWABAAAAgJ9QsAAAAADATyhYAAAAAOAnFCwAAAAA8BMKFgAAAAD4CQULAAAAAPyEggUAAAAAfkLBAgAAAAA/oWABAAAAgJ9QsAAAAADATyhYAAAAAOAnFCwAAAAA8BMKFgAAAAD4STHTAQAAAACYliRpm6QUSZmSIiSVlNRQUiWDudyHggUAAAB4TrKkWZKWS9oqKUNSpKRsSZYkn+zFbmc/3lBSJ0k9JcUayOsePsuyLNMhAAAAAATDRkmTJC2TXaLSCvC50bLLV2dJwyQ193u6UEDBAgAAAELeEUl9JX0oKV32pKqwwiRFSeoo6TVJ5YqcLpRQsAAAAICQtkzSg5JSZS/585dISTGS5shePgiJUwQBAACAEGXJXsoXL+mo/FuulHO9o5K659yHuY3EBAsAAAAIQZakPpIWSDoVhPuVkF20Xpe9t8u7mGABAAAAIWe4gleulHOfBTn39TYmWAAAAEBIWSZ7WWCqgXvHyC5a3t2TRcECAAAAQsYRSbVl740ypaykRHn1dEGWCAIAAAAho6/MTK7OlSqpn+EM5jDBAgAAAELCRkntZL5gSfZSwbWSmhnOEXxMsAAAAICQMEn2Q4SdIF3SRNMhjGCCBQAAALhesqSqck7BkqQoSfslxZoOElRMsAAAAADXmyXnPX/KJ2m26RBBR8ECAAAAXG+5pDTTIc6TJjuXt7BEEAAAAHC9MpKOmw6RhzIye2R88DHBAgAAAFwtSVKG6RD5SJN00HSIoKJgAQAAAK62TVKk6RD5iJKdzzsoWAAAAICrpUjKNh0iH5bsfN5BwQIAAABcLVN2kXGibDl3+WJgULAAAAAAV4uQ845oPytMzl2+GBgULAAAAMDVSsq5L+t9svN5h1P/TQAAAAC4KA3k3GV46bLzeQcFCwAAAHC1ynLuMrxoSZVMhwgqChYAAADgeg1NB8iHU3MFDgULAAAAcL1OsqdFThItO5e3+CzLcuqZjgAAAAAuSrKkqrL3PDlFlKT9kmJNBwkqJlgAAACA68VK6iznvLwPk53HW+VKcs6/AQAAAABFMkz21MgJoiQNNx3CCAoWAAAAEBKaS+oo8ycKRkq6TVIzwznMYA8WAAAAEDKOSKot6ajBDGUl7c750XuYYAEAAAAho5yk2ZJiDN0/RtIcebVcSRQsAAAAIMR0ltRfUokg37dEzn29dzT7uVgiCAAAAIQcS1IfSQsknQrC/UpIipf0miRfEO7nXEywAAAAgJDjk/S6pH4K/HLBmJz7UK4kJlgAAABASDtzZqlOneqqmBifihXL8uOVI/X/91x5e1nguZhgAQAAACFs/Pjv1bNna4WHd5ZdiIpaAcJyrtNJUqIoV7/HBAsAAAAIUTt37tSNN96ozZs3q0aNGpI2SZooaZns5XxpBbhatOy9XZ1lP0TYm8+5uhAKFgAAABCCsrKy1KpVK/Xs2VP9+/c/71eTZR/nvlzSVtlFK0p2gcqWPaXySUqXXawayp5UPSgpNhjxXYuCBQAAAISgCRMm6MMPP9THH3+ssLALLQs8KGmbpBRJGbL3V5WU1EBSpcAGDTEULAAAACDE/PDDD2rVqpU2btyoWrVqmY7jKRxyAQAAAISQM2fOqFevXnrmmWcoVwZQsAAAAIAQMnXqVIWHh2vAgAGmo3gSSwQBAACAEJGYmKiWLVtq/fr1qlOnjuk4nsQECwAAAAgB2dnZeuihh/TEE09QrgyiYAEAAAAhYMaMGTp9+rQGDRpkOoqnsUQQAAAAcLk9e/aoWbNm+uyzz1S3bl3TcTyNCRYAAADgYpZlqXfv3nrssccoVw5AwQIAAABc7LXXXlNKSoqGDRtmOgrEEkEAAADAtfbt26cmTZpo7dq1uvrqq03HgZhgAQAAAK5kWZb69OmjwYMHU64chIIFAAAAuNCsWbN0+PBhjRgxwnQUnIMlggAAAIDLHDhwQI0aNdLHH3+shg0bmo6DczDBAgAAAFzEsiz169dPAwYMoFw5UDHTAQAAAABcvLffflu//PKLlixZYjoK8sASQQAAAMAlDh48qIYNG+pf//qXGjdubDoO8kDBAgAAAFzAsizddddduvrqq/Xcc8+ZjoN8sEQQAAAAcIEFCxZo165dWrhwoeko+BNMsAAAAACHO3TokBo0aKAVK1aoWbNmpuPgT1CwAAAAAIfr2rWratWqpXHjxpmOggtgiSAAAADgYIsXL9b27dv11ltvmY6Ci8AECwAAAHCo3377TfXr19e7776r66+/3nQcXAQKFgAAAOBQPXr00KWXXqoXX3zRdBRcJJYIAgAAAA70/vvva9OmTdq6davpKCgAJlgAAACAwxw5ckT169fLine truncated
|
||||
"text/plain": [
|
||||
"<Figure size 864x864 with 1 Axes>"
|
||||
]
|
||||
},
|
||||
"metadata": {},
|
||||
"output_type": "display_data"
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"<Figure size 432x288 with 0 Axes>"
|
||||
]
|
||||
},
|
||||
"metadata": {},
|
||||
"output_type": "display_data"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"# import networkx\n",
|
||||
"import networkx as nx\n",
|
||||
"import matplotlib.pyplot as plt\n",
|
||||
"\n",
|
||||
"fig = plt.figure(figsize=(12,12))\n",
|
||||
"ax = plt.subplot(111)\n",
|
||||
"ax.set_title('Graph - Shapes', fontsize=10)\n",
|
||||
"\n",
|
||||
"# initiate graph\n",
|
||||
"graph = nx.MultiGraph()\n",
|
||||
"\n",
|
||||
"# create edges from dataframe\n",
|
||||
"graph = nx.from_pandas_edgelist(df_edges, source = 'from', target = 'to', edge_attr= 'label')\n",
|
||||
"\n",
|
||||
"# update node attributes from dataframe\n",
|
||||
"nodes_attr = df_nodes.set_index('id').to_dict(orient = 'index')\n",
|
||||
"nx.set_node_attributes(graph, nodes_attr)\n",
|
||||
"\n",
|
||||
"\n",
|
||||
"pos = nx.spring_layout(graph)\n",
|
||||
"nx.draw(graph, pos, node_size=1500, node_color='yellow', font_size=8, font_weight='bold')\n",
|
||||
"\n",
|
||||
"plt.tight_layout()\n",
|
||||
"plt.show()\n",
|
||||
"plt.savefig(\"Graph.png\", format=\"PNG\")"
|
||||
]
|
||||
},
|
||||
{
|
||||
"attachments": {},
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"## Visualisierung des Netzwerks mit pyvis\n",
|
||||
"\n",
|
||||
"Für die Visualisierung importieren wir `Network` von `pyvis.network` und initialisiern das `pyvis` Netzwerk. Mit der Methode `from_nx` können wir das `networkx` Netzwerk übergeben. \n",
|
||||
"\n",
|
||||
"Die Größe der Knoten bestimmen wir je nach Auswahl entweder aufgrund der Anzahl der Verbindungen zu anderen Knoten oder anhand der Eigenvektor-Zentralität. Knoten mit vielen Verbindungen bzw. höherer Zentralität werden größer dargestellt."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 86,
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"# visualize using pyvis\n",
|
||||
"from pyvis.network import Network\n",
|
||||
"\n",
|
||||
"def create_centrality_graph(df, measure_type, save_path):\n",
|
||||
" # initiate network\n",
|
||||
" net = Network(directed=False, neighborhood_highlight=True, bgcolor = \"white\", font_color=\"black\")\n",
|
||||
"\n",
|
||||
" # pass networkx graph to pyvis\n",
|
||||
" net.from_nx(graph)\n",
|
||||
"\n",
|
||||
" # set edge options \n",
|
||||
" net.inherit_edge_colors(False)\n",
|
||||
" net.set_edge_smooth('dynamic')\n",
|
||||
"\n",
|
||||
" adj_list = net.get_adj_list()\n",
|
||||
"\n",
|
||||
" measure_vector = {}\n",
|
||||
"\n",
|
||||
" if measure_type == \"eigenvector\":\n",
|
||||
" measure_vector = nx.eigenvector_centrality(graph)\n",
|
||||
" df[\"eigenvector\"] = measure_vector.values()\n",
|
||||
" if measure_type == \"degree\":\n",
|
||||
" measure_vector = nx.degree_centrality(graph)\n",
|
||||
" df[\"degree\"] = measure_vector.values()\n",
|
||||
" if measure_type == \"betweeness\":\n",
|
||||
" measure_vector = nx.betweenness_centrality(graph)\n",
|
||||
" df[\"betweeness\"] = measure_vector.values()\n",
|
||||
" if measure_type == \"closeness\":\n",
|
||||
" measure_vector = nx.closeness_centrality(graph)\n",
|
||||
" df[\"closeness\"] = measure_vector.values()\n",
|
||||
" if measure_type == \"pagerank\":\n",
|
||||
" measure_vector = nx.pagerank(graph)\n",
|
||||
" df[\"pagerank\"] = measure_vector.values()\n",
|
||||
" if measure_type == \"average_degree\":\n",
|
||||
" measure_vector = nx.average_degree_connectivity(graph)\n",
|
||||
" # df[\"average_degree\"] = measure_vector.values()\n",
|
||||
" print(measure_vector.values())\n",
|
||||
" \n",
|
||||
"\n",
|
||||
" # calculate and update size of the nodes depending on their number of edges\n",
|
||||
" for node_id, neighbors in adj_list.items():\n",
|
||||
" \n",
|
||||
" # df[\"edges\"] = measure_vector.values()\n",
|
||||
" \n",
|
||||
" if measure_type == \"edges\":\n",
|
||||
" size = 10 #len(neighbors)*5 \n",
|
||||
" else:\n",
|
||||
" size = measure_vector[node_id]*50 \n",
|
||||
" next((node.update({'size': size}) for node in net.nodes if node['id'] == node_id), None)\n",
|
||||
"\n",
|
||||
" # set the node distance and spring lenght using repulsion\n",
|
||||
" net.repulsion(node_distance=150, spring_length=50)\n",
|
||||
"\n",
|
||||
" # activate physics buttons to further explore the available solvers:\n",
|
||||
" # barnesHut, forceAtlas2Based, repulsion, hierarchicalRepulsion\n",
|
||||
" net.show_buttons(filter_=['physics'])\n",
|
||||
"\n",
|
||||
" # save graph as HTML\n",
|
||||
" net.save_graph(save_path)\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"attachments": {},
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Alle zusammen ausführen und ein DataFram erstellen mit allen Nodes je nach Kennzahl aufgeteilt."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 88,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/html": [
|
||||
"<div>\n",
|
||||
"<style scoped>\n",
|
||||
" .dataframe tbody tr th:only-of-type {\n",
|
||||
" vertical-align: middle;\n",
|
||||
" }\n",
|
||||
"\n",
|
||||
" .dataframe tbody tr th {\n",
|
||||
" vertical-align: top;\n",
|
||||
" }\n",
|
||||
"\n",
|
||||
" .dataframe thead th {\n",
|
||||
" text-align: right;\n",
|
||||
" }\n",
|
||||
"</style>\n",
|
||||
"<table border=\"1\" class=\"dataframe\">\n",
|
||||
" <thead>\n",
|
||||
" <tr style=\"text-align: right;\">\n",
|
||||
" <th></th>\n",
|
||||
" <th>eigenvector</th>\n",
|
||||
" <th>degree</th>\n",
|
||||
" <th>betweeness</th>\n",
|
||||
" <th>closeness</th>\n",
|
||||
" <th>pagerank</th>\n",
|
||||
" </tr>\n",
|
||||
" </thead>\n",
|
||||
" <tbody>\n",
|
||||
" <tr>\n",
|
||||
" <th>0</th>\n",
|
||||
" <td>0.241703</td>\n",
|
||||
" <td>0.1</td>\n",
|
||||
" <td>0.000000</td>\n",
|
||||
" <td>0.416667</td>\n",
|
||||
" <td>0.053313</td>\n",
|
||||
" </tr>\n",
|
||||
" <tr>\n",
|
||||
" <th>1</th>\n",
|
||||
" <td>0.633039</td>\n",
|
||||
" <td>0.6</td>\n",
|
||||
" <td>0.777778</td>\n",
|
||||
" <td>0.666667</td>\n",
|
||||
" <td>0.280074</td>\n",
|
||||
" </tr>\n",
|
||||
" <tr>\n",
|
||||
" <th>2</th>\n",
|
||||
" <td>0.241703</td>\n",
|
||||
" <td>0.1</td>\n",
|
||||
" <td>0.000000</td>\n",
|
||||
" <td>0.416667</td>\n",
|
||||
" <td>0.053313</td>\n",
|
||||
" </tr>\n",
|
||||
" <tr>\n",
|
||||
" <th>3</th>\n",
|
||||
" <td>0.449459</td>\n",
|
||||
" <td>0.4</td>\n",
|
||||
" <td>0.644444</td>\n",
|
||||
" <td>0.625000</td>\n",
|
||||
" <td>0.187550</td>\n",
|
||||
" </tr>\n",
|
||||
" <tr>\n",
|
||||
" <th>4</th>\n",
|
||||
" <td>0.241703</td>\n",
|
||||
" <td>0.1</td>\n",
|
||||
" <td>0.000000</td>\n",
|
||||
" <td>0.416667</td>\n",
|
||||
" <td>0.053313</td>\n",
|
||||
" </tr>\n",
|
||||
" <tr>\n",
|
||||
" <th>5</th>\n",
|
||||
" <td>0.241703</td>\n",
|
||||
" <td>0.1</td>\n",
|
||||
" <td>0.000000</td>\n",
|
||||
" <td>0.416667</td>\n",
|
||||
" <td>0.053313</td>\n",
|
||||
" </tr>\n",
|
||||
" <tr>\n",
|
||||
" <th>6</th>\n",
|
||||
" <td>0.241703</td>\n",
|
||||
" <td>0.1</td>\n",
|
||||
" <td>0.000000</td>\n",
|
||||
" <td>0.416667</td>\n",
|
||||
" <td>0.053313</td>\n",
|
||||
" </tr>\n",
|
||||
" <tr>\n",
|
||||
" <th>7</th>\n",
|
||||
" <td>0.171611</td>\n",
|
||||
" <td>0.1</td>\n",
|
||||
" <td>0.000000</td>\n",
|
||||
" <td>0.400000</td>\n",
|
||||
" <td>0.053491</td>\n",
|
||||
" </tr>\n",
|
||||
" <tr>\n",
|
||||
" <th>8</th>\n",
|
||||
" <td>0.171611</td>\n",
|
||||
" <td>0.1</td>\n",
|
||||
" <td>0.000000</td>\n",
|
||||
" <td>0.400000</td>\n",
|
||||
" <td>0.053491</td>\n",
|
||||
" </tr>\n",
|
||||
" <tr>\n",
|
||||
" <th>9</th>\n",
|
||||
" <td>0.076707</td>\n",
|
||||
" <td>0.1</td>\n",
|
||||
" <td>0.000000</td>\n",
|
||||
" <td>0.312500</td>\n",
|
||||
" <td>0.056939</td>\n",
|
||||
" </tr>\n",
|
||||
" <tr>\n",
|
||||
" <th>10</th>\n",
|
||||
" <td>0.200900</td>\n",
|
||||
" <td>0.2</td>\n",
|
||||
" <td>0.200000</td>\n",
|
||||
" <td>0.434783</td>\n",
|
||||
" <td>0.101890</td>\n",
|
||||
" </tr>\n",
|
||||
" </tbody>\n",
|
||||
"</table>\n",
|
||||
"</div>"
|
||||
],
|
||||
"text/plain": [
|
||||
" eigenvector degree betweeness closeness pagerank\n",
|
||||
"0 0.241703 0.1 0.000000 0.416667 0.053313\n",
|
||||
"1 0.633039 0.6 0.777778 0.666667 0.280074\n",
|
||||
"2 0.241703 0.1 0.000000 0.416667 0.053313\n",
|
||||
"3 0.449459 0.4 0.644444 0.625000 0.187550\n",
|
||||
"4 0.241703 0.1 0.000000 0.416667 0.053313\n",
|
||||
"5 0.241703 0.1 0.000000 0.416667 0.053313\n",
|
||||
"6 0.241703 0.1 0.000000 0.416667 0.053313\n",
|
||||
"7 0.171611 0.1 0.000000 0.400000 0.053491\n",
|
||||
"8 0.171611 0.1 0.000000 0.400000 0.053491\n",
|
||||
"9 0.076707 0.1 0.000000 0.312500 0.056939\n",
|
||||
"10 0.200900 0.2 0.200000 0.434783 0.101890"
|
||||
]
|
||||
},
|
||||
"execution_count": 88,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"centrality_comparison_df = pd.DataFrame()\n",
|
||||
"\n",
|
||||
"eigenvector_path = \"./metrics/eigenvector_networkx.html\"\n",
|
||||
"degree_path = \"./metrics/degree_networkx.html\"\n",
|
||||
"betweeness_path = \"./metrics/betweeness_networkx.html\"\n",
|
||||
"closeness_path = \"./metrics/closeness_networkx.html\"\n",
|
||||
"pagerank_path = \"./metrics/pagerank_networkx.html\"\n",
|
||||
"average_degree_path = \"./metrics/average_degree_path_networkx.html\"\n",
|
||||
"edges_path = \"./metrics/edges_path_networkx.html\"\n",
|
||||
"\n",
|
||||
"create_centrality_graph(centrality_comparison_df, \"eigenvector\", eigenvector_path)\n",
|
||||
"create_centrality_graph(centrality_comparison_df, \"degree\", degree_path)\n",
|
||||
"create_centrality_graph(centrality_comparison_df, \"betweeness\", betweeness_path)\n",
|
||||
"create_centrality_graph(centrality_comparison_df, \"closeness\", closeness_path)\n",
|
||||
"create_centrality_graph(centrality_comparison_df, \"pagerank\", pagerank_path)\n",
|
||||
"# create_centrality_graph(centrality_comparison_df, \"average_degree\", average_degree_path)\n",
|
||||
"create_centrality_graph(centrality_comparison_df, \"edges\", edges_path)\n",
|
||||
"\n",
|
||||
"centrality_comparison_df"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 95,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"0.18181818181818182\n",
|
||||
"4\n",
|
||||
"2.327272727272727\n",
|
||||
"Graph with 11 nodes and 10 edges\n",
|
||||
"0.0\n",
|
||||
"{1: 5.0, 6: 1.5, 4: 2.5, 2: 2.5}\n",
|
||||
"{1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11}\n",
|
||||
"[<networkx.classes.graph.Graph object at 0x0000010B79F72820>]\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"print(nx.density(graph))\n",
|
||||
"print(nx.diameter(graph))\n",
|
||||
"print(nx.average_shortest_path_length(graph))\n",
|
||||
"print(nx.k_core(graph))\n",
|
||||
"print(nx.average_clustering(graph))\n",
|
||||
"print(nx.average_degree_connectivity(graph))\n",
|
||||
"# print(nx.community.modularity(graph, [{ 1, 2}]))\n",
|
||||
"print(max(nx.connected_components(graph)))\n",
|
||||
"s = [graph.subgraph(c).copy() for c in nx.connected_components(graph)]\n",
|
||||
"print(s)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 96,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"ename": "AssertionError",
|
||||
"evalue": "",
|
||||
"output_type": "error",
|
||||
"traceback": [
|
||||
"\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
|
||||
"\u001b[1;31mAssertionError\u001b[0m Traceback (most recent call last)",
|
||||
"\u001b[1;32mc:\\Users\\Tim\\Documents\\Master\\Semester 4\\Projektgruppe\\aki_prj23_transparenzregister\\documentations\\seminararbeiten\\Verflechtungsanalyse\\mockup_verflechtungsanalyse_with_networkx.ipynb Cell 17\u001b[0m in \u001b[0;36m<cell line: 4>\u001b[1;34m()\u001b[0m\n\u001b[0;32m <a href='vscode-notebook-cell:/c%3A/Users/Tim/Documents/Master/Semester%204/Projektgruppe/aki_prj23_transparenzregister/documentations/seminararbeiten/Verflechtungsanalyse/mockup_verflechtungsanalyse_with_networkx.ipynb#X41sZmlsZQ%3D%3D?line=0'>1</a>\u001b[0m net \u001b[39m=\u001b[39m Network(directed\u001b[39m=\u001b[39m\u001b[39mFalse\u001b[39;00m, neighborhood_highlight\u001b[39m=\u001b[39m\u001b[39mTrue\u001b[39;00m, bgcolor \u001b[39m=\u001b[39m \u001b[39m\"\u001b[39m\u001b[39mwhite\u001b[39m\u001b[39m\"\u001b[39m, font_color\u001b[39m=\u001b[39m\u001b[39m\"\u001b[39m\u001b[39mblack\u001b[39m\u001b[39m\"\u001b[39m)\n\u001b[0;32m <a href='vscode-notebook-cell:/c%3A/Users/Tim/Documents/Master/Semester%204/Projektgruppe/aki_prj23_transparenzregister/documentations/seminararbeiten/Verflechtungsanalyse/mockup_verflechtungsanalyse_with_networkx.ipynb#X41sZmlsZQ%3D%3D?line=2'>3</a>\u001b[0m \u001b[39m# pass networkx graph to pyvis\u001b[39;00m\n\u001b[1;32m----> <a href='vscode-notebook-cell:/c%3A/Users/Tim/Documents/Master/Semester%204/Projektgruppe/aki_prj23_transparenzregister/documentations/seminararbeiten/Verflechtungsanalyse/mockup_verflechtungsanalyse_with_networkx.ipynb#X41sZmlsZQ%3D%3D?line=3'>4</a>\u001b[0m net\u001b[39m.\u001b[39;49mfrom_nx(s)\n\u001b[0;32m <a href='vscode-notebook-cell:/c%3A/Users/Tim/Documents/Master/Semester%204/Projektgruppe/aki_prj23_transparenzregister/documentations/seminararbeiten/Verflechtungsanalyse/mockup_verflechtungsanalyse_with_networkx.ipynb#X41sZmlsZQ%3D%3D?line=5'>6</a>\u001b[0m \u001b[39m# set edge options \u001b[39;00m\n\u001b[0;32m <a href='vscode-notebook-cell:/c%3A/Users/Tim/Documents/Master/Semester%204/Projektgruppe/aki_prj23_transparenzregister/documentations/seminararbeiten/Verflechtungsanalyse/mockup_verflechtungsanalyse_with_networkx.ipynb#X41sZmlsZQ%3D%3D?line=6'>7</a>\u001b[0m net\u001b[39m.\u001b[39minherit_edge_colors(\u001b[39mFalse\u001b[39;00m)\n",
|
||||
"File \u001b[1;32mc:\\Users\\Tim\\AppData\\Local\\Programs\\Python\\Python39\\lib\\site-packages\\pyvis\\network.py:689\u001b[0m, in \u001b[0;36mNetwork.from_nx\u001b[1;34m(self, nx_graph, node_size_transf, edge_weight_transf, default_node_size, default_edge_weight, show_edge_weights, edge_scaling)\u001b[0m\n\u001b[0;32m 660\u001b[0m \u001b[39mdef\u001b[39;00m \u001b[39mfrom_nx\u001b[39m(\u001b[39mself\u001b[39m, nx_graph, node_size_transf\u001b[39m=\u001b[39m(\u001b[39mlambda\u001b[39;00m x: x), edge_weight_transf\u001b[39m=\u001b[39m(\u001b[39mlambda\u001b[39;00m x: x),\n\u001b[0;32m 661\u001b[0m default_node_size \u001b[39m=\u001b[39m\u001b[39m10\u001b[39m, default_edge_weight\u001b[39m=\u001b[39m\u001b[39m1\u001b[39m, show_edge_weights\u001b[39m=\u001b[39m\u001b[39mTrue\u001b[39;00m, edge_scaling\u001b[39m=\u001b[39m\u001b[39mFalse\u001b[39;00m):\n\u001b[0;32m 662\u001b[0m \u001b[39m\"\"\"\u001b[39;00m\n\u001b[0;32m 663\u001b[0m \u001b[39m This method takes an exisitng Networkx graph and translates\u001b[39;00m\n\u001b[0;32m 664\u001b[0m \u001b[39m it to a PyVis graph format that can be accepted by the VisJs\u001b[39;00m\n\u001b[1;32m (...)\u001b[0m\n\u001b[0;32m 687\u001b[0m \u001b[39m >>> nt.show(\"nx.html\")\u001b[39;00m\n\u001b[0;32m 688\u001b[0m \u001b[39m \"\"\"\u001b[39;00m\n\u001b[1;32m--> 689\u001b[0m \u001b[39massert\u001b[39;00m(\u001b[39misinstance\u001b[39m(nx_graph, nx\u001b[39m.\u001b[39mGraph))\n\u001b[0;32m 690\u001b[0m edges\u001b[39m=\u001b[39mnx_graph\u001b[39m.\u001b[39medges(data \u001b[39m=\u001b[39m \u001b[39mTrue\u001b[39;00m)\n\u001b[0;32m 691\u001b[0m nodes\u001b[39m=\u001b[39mnx_graph\u001b[39m.\u001b[39mnodes(data \u001b[39m=\u001b[39m \u001b[39mTrue\u001b[39;00m)\n",
|
||||
"\u001b[1;31mAssertionError\u001b[0m: "
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"net = Network(directed=False, neighborhood_highlight=True, bgcolor = \"white\", font_color=\"black\")\n",
|
||||
"\n",
|
||||
"# pass networkx graph to pyvis\n",
|
||||
"net.from_nx(s)\n",
|
||||
"\n",
|
||||
"# set edge options \n",
|
||||
"net.inherit_edge_colors(False)\n",
|
||||
"net.set_edge_smooth('dynamic')\n",
|
||||
"\n",
|
||||
"adj_list = net.get_adj_list()\n",
|
||||
"\n",
|
||||
"# calculate and update size of the nodes depending on their number of edges\n",
|
||||
"for node_id, neighbors in adj_list.items():\n",
|
||||
" \n",
|
||||
" # df[\"edges\"] = measure_vector.values()\n",
|
||||
" \n",
|
||||
" \n",
|
||||
" size = 10 #len(neighbors)*5 \n",
|
||||
" \n",
|
||||
" next((node.update({'size': size}) for node in net.nodes if node['id'] == node_id), None)\n",
|
||||
"\n",
|
||||
"# set the node distance and spring lenght using repulsion\n",
|
||||
"net.repulsion(node_distance=150, spring_length=50)\n",
|
||||
"\n",
|
||||
"# activate physics buttons to further explore the available solvers:\n",
|
||||
"# barnesHut, forceAtlas2Based, repulsion, hierarchicalRepulsion\n",
|
||||
"net.show_buttons(filter_=['physics'])\n",
|
||||
"\n",
|
||||
"# save graph as HTML\n",
|
||||
"net.save_graph(\"./metrics/connected_components_networkx.html\")"
|
||||
]
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
"interpreter": {
|
||||
"hash": "aee8b7b246df8f9039afb4144a1f6fd8d2ca17a180786b69acc140d282b71a49"
|
||||
},
|
||||
"kernelspec": {
|
||||
"display_name": "Python 3.10.1 64-bit",
|
||||
"language": "python",
|
||||
"name": "python3"
|
||||
},
|
||||
"language_info": {
|
||||
"codemirror_mode": {
|
||||
"name": "ipython",
|
||||
"version": 3
|
||||
},
|
||||
"file_extension": ".py",
|
||||
"mimetype": "text/x-python",
|
||||
"name": "python",
|
||||
"nbconvert_exporter": "python",
|
||||
"pygments_lexer": "ipython3",
|
||||
"version": "3.9.13"
|
||||
},
|
||||
"orig_nbformat": 4
|
||||
},
|
||||
"nbformat": 4,
|
||||
"nbformat_minor": 2
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
from;to;label
|
||||
2;1;part_of
|
||||
3;1;part_of
|
||||
4;1;part_of
|
||||
5;1;part_of
|
||||
6;1;part_of
|
||||
7;1;part_of
|
||||
8;4;part_of
|
||||
9;4;part_of
|
||||
11;10;part_of
|
||||
10;4;supplierer
|
||||
|
Reference in new issue
Block a user