mirror of
https://github.com/fhswf/aki_prj23_transparenzregister.git
synced 2026-02-13 22:17:38 +01:00
24 files changed
+9674
-7
No files matched your search
@@ -0,0 +1,369 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<script>function neighbourhoodHighlight(params) {
|
||||
// console.log("in nieghbourhoodhighlight");
|
||||
allNodes = nodes.get({ returnType: "Object" });
|
||||
// originalNodes = JSON.parse(JSON.stringify(allNodes));
|
||||
// if something is selected:
|
||||
if (params.nodes.length > 0) {
|
||||
highlightActive = true;
|
||||
var i, j;
|
||||
var selectedNode = params.nodes[0];
|
||||
var degrees = 2;
|
||||
|
||||
// mark all nodes as hard to read.
|
||||
for (let nodeId in allNodes) {
|
||||
// nodeColors[nodeId] = allNodes[nodeId].color;
|
||||
allNodes[nodeId].color = "rgba(200,200,200,0.5)";
|
||||
if (allNodes[nodeId].hiddenLabel === undefined) {
|
||||
allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
|
||||
allNodes[nodeId].label = undefined;
|
||||
}
|
||||
}
|
||||
var connectedNodes = network.getConnectedNodes(selectedNode);
|
||||
var allConnectedNodes = [];
|
||||
|
||||
// get the second degree nodes
|
||||
for (i = 1; i < degrees; i++) {
|
||||
for (j = 0; j < connectedNodes.length; j++) {
|
||||
allConnectedNodes = allConnectedNodes.concat(
|
||||
network.getConnectedNodes(connectedNodes[j])
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// all second degree nodes get a different color and their label back
|
||||
for (i = 0; i < allConnectedNodes.length; i++) {
|
||||
// allNodes[allConnectedNodes[i]].color = "pink";
|
||||
allNodes[allConnectedNodes[i]].color = "rgba(150,150,150,0.75)";
|
||||
if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
|
||||
allNodes[allConnectedNodes[i]].label =
|
||||
allNodes[allConnectedNodes[i]].hiddenLabel;
|
||||
allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// all first degree nodes get their own color and their label back
|
||||
for (i = 0; i < connectedNodes.length; i++) {
|
||||
// allNodes[connectedNodes[i]].color = undefined;
|
||||
allNodes[connectedNodes[i]].color = nodeColors[connectedNodes[i]];
|
||||
if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
|
||||
allNodes[connectedNodes[i]].label =
|
||||
allNodes[connectedNodes[i]].hiddenLabel;
|
||||
allNodes[connectedNodes[i]].hiddenLabel = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// the main node gets its own color and its label back.
|
||||
// allNodes[selectedNode].color = undefined;
|
||||
allNodes[selectedNode].color = nodeColors[selectedNode];
|
||||
if (allNodes[selectedNode].hiddenLabel !== undefined) {
|
||||
allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
|
||||
allNodes[selectedNode].hiddenLabel = undefined;
|
||||
}
|
||||
} else if (highlightActive === true) {
|
||||
// console.log("highlightActive was true");
|
||||
// reset all nodes
|
||||
for (let nodeId in allNodes) {
|
||||
// allNodes[nodeId].color = "purple";
|
||||
allNodes[nodeId].color = nodeColors[nodeId];
|
||||
// delete allNodes[nodeId].color;
|
||||
if (allNodes[nodeId].hiddenLabel !== undefined) {
|
||||
allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
|
||||
allNodes[nodeId].hiddenLabel = undefined;
|
||||
}
|
||||
}
|
||||
highlightActive = false;
|
||||
}
|
||||
|
||||
// transform the object into an array
|
||||
var updateArray = [];
|
||||
if (params.nodes.length > 0) {
|
||||
for (let nodeId in allNodes) {
|
||||
if (allNodes.hasOwnProperty(nodeId)) {
|
||||
// console.log(allNodes[nodeId]);
|
||||
updateArray.push(allNodes[nodeId]);
|
||||
}
|
||||
}
|
||||
nodes.update(updateArray);
|
||||
} else {
|
||||
// console.log("Nothing was selected");
|
||||
for (let nodeId in allNodes) {
|
||||
if (allNodes.hasOwnProperty(nodeId)) {
|
||||
// console.log(allNodes[nodeId]);
|
||||
// allNodes[nodeId].color = {};
|
||||
updateArray.push(allNodes[nodeId]);
|
||||
}
|
||||
}
|
||||
nodes.update(updateArray);
|
||||
}
|
||||
}
|
||||
|
||||
function filterHighlight(params) {
|
||||
allNodes = nodes.get({ returnType: "Object" });
|
||||
// if something is selected:
|
||||
if (params.nodes.length > 0) {
|
||||
filterActive = true;
|
||||
let selectedNodes = params.nodes;
|
||||
|
||||
// hiding all nodes and saving the label
|
||||
for (let nodeId in allNodes) {
|
||||
allNodes[nodeId].hidden = true;
|
||||
if (allNodes[nodeId].savedLabel === undefined) {
|
||||
allNodes[nodeId].savedLabel = allNodes[nodeId].label;
|
||||
allNodes[nodeId].label = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
for (let i=0; i < selectedNodes.length; i++) {
|
||||
allNodes[selectedNodes[i]].hidden = false;
|
||||
if (allNodes[selectedNodes[i]].savedLabel !== undefined) {
|
||||
allNodes[selectedNodes[i]].label = allNodes[selectedNodes[i]].savedLabel;
|
||||
allNodes[selectedNodes[i]].savedLabel = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
} else if (filterActive === true) {
|
||||
// reset all nodes
|
||||
for (let nodeId in allNodes) {
|
||||
allNodes[nodeId].hidden = false;
|
||||
if (allNodes[nodeId].savedLabel !== undefined) {
|
||||
allNodes[nodeId].label = allNodes[nodeId].savedLabel;
|
||||
allNodes[nodeId].savedLabel = undefined;
|
||||
}
|
||||
}
|
||||
filterActive = false;
|
||||
}
|
||||
|
||||
// transform the object into an array
|
||||
var updateArray = [];
|
||||
if (params.nodes.length > 0) {
|
||||
for (let nodeId in allNodes) {
|
||||
if (allNodes.hasOwnProperty(nodeId)) {
|
||||
updateArray.push(allNodes[nodeId]);
|
||||
}
|
||||
}
|
||||
nodes.update(updateArray);
|
||||
} else {
|
||||
for (let nodeId in allNodes) {
|
||||
if (allNodes.hasOwnProperty(nodeId)) {
|
||||
updateArray.push(allNodes[nodeId]);
|
||||
}
|
||||
}
|
||||
nodes.update(updateArray);
|
||||
}
|
||||
}
|
||||
|
||||
function selectNode(nodes) {
|
||||
network.selectNodes(nodes);
|
||||
neighbourhoodHighlight({ nodes: nodes });
|
||||
return nodes;
|
||||
}
|
||||
|
||||
function selectNodes(nodes) {
|
||||
network.selectNodes(nodes);
|
||||
filterHighlight({nodes: nodes});
|
||||
return nodes;
|
||||
}
|
||||
|
||||
function highlightFilter(filter) {
|
||||
let selectedNodes = []
|
||||
let selectedProp = filter['property']
|
||||
if (filter['item'] === 'node') {
|
||||
let allNodes = nodes.get({ returnType: "Object" });
|
||||
for (let nodeId in allNodes) {
|
||||
if (allNodes[nodeId][selectedProp] && filter['value'].includes((allNodes[nodeId][selectedProp]).toString())) {
|
||||
selectedNodes.push(nodeId)
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (filter['item'] === 'edge'){
|
||||
let allEdges = edges.get({returnType: 'object'});
|
||||
// check if the selected property exists for selected edge and select the nodes connected to the edge
|
||||
for (let edge in allEdges) {
|
||||
if (allEdges[edge][selectedProp] && filter['value'].includes((allEdges[edge][selectedProp]).toString())) {
|
||||
selectedNodes.push(allEdges[edge]['from'])
|
||||
selectedNodes.push(allEdges[edge]['to'])
|
||||
}
|
||||
}
|
||||
}
|
||||
selectNodes(selectedNodes)
|
||||
}</script>
|
||||
<style>.vis-overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}div.vis-color-picker{background-color:#fff;border-radius:15px;box-shadow:0 0 10px 0 rgba(0,0,0,.5);display:none;height:444px;left:30px;margin-left:30px;margin-top:-140px;padding:10px;position:absolute;top:0;width:310px;z-index:1}div.vis-color-picker div.vis-arrow{left:5px;position:absolute;top:147px}div.vis-color-picker div.vis-arrow:after,div.vis-color-picker div.vis-arrow:before{border:solid transparent;content:" ";height:0;pointer-events:none;position:absolute;right:100%;top:50%;width:0}div.vis-color-picker div.vis-arrow:after{border-color:hsla(0,0%,100%,0) #fff hsla(0,0%,100%,0) hsla(0,0%,100%,0);border-width:30px;margin-top:-30px}div.vis-color-picker div.vis-color{cursor:pointer;height:289px;position:absolute;width:289px}div.vis-color-picker div.vis-brightness{position:absolute;top:313px}div.vis-color-picker div.vis-opacity{position:absolute;top:350px}div.vis-color-picker div.vis-selector{background:#4c4c4c;background:-moz-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4c4c4c),color-stop(12%,#595959),color-stop(25%,#666),color-stop(39%,#474747),color-stop(50%,#2c2c2c),color-stop(51%,#000),color-stop(60%,#111),color-stop(76%,#2b2b2b),color-stop(91%,#1c1c1c),color-stop(100%,#131313));background:-webkit-linear-gradient(top,#4c4c4c,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313);background:-o-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-ms-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:linear-gradient(180deg,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313);border:1px solid #fff;border-radius:15px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c",endColorstr="#131313",GradientType=0);height:15px;left:137px;position:absolute;top:137px;width:15px}div.vis-color-picker div.vis-new-color{left:159px;padding-right:2px;text-align:right}div.vis-color-picker div.vis-initial-color,div.vis-color-picker div.vis-new-color{border:1px solid rgba(0,0,0,.1);border-radius:5px;color:rgba(0,0,0,.4);font-size:10px;height:20px;line-height:20px;position:absolute;top:380px;vertical-align:middle;width:140px}div.vis-color-picker div.vis-initial-color{left:10px;padding-left:2px;text-align:left}div.vis-color-picker div.vis-label{left:10px;position:absolute;width:300px}div.vis-color-picker div.vis-label.vis-brightness{top:300px}div.vis-color-picker div.vis-label.vis-opacity{top:338px}div.vis-color-picker div.vis-button{background-color:#f7f7f7;border:2px solid #d9d9d9;border-radius:10px;cursor:pointer;height:25px;line-height:25px;position:absolute;text-align:center;top:410px;vertical-align:middle;width:68px}div.vis-color-picker div.vis-button.vis-cancel{left:5px}div.vis-color-picker div.vis-button.vis-load{left:82px}div.vis-color-picker div.vis-button.vis-apply{left:159px}div.vis-color-picker div.vis-button.vis-save{left:236px}div.vis-color-picker input.vis-range{height:20px;width:290px}div.vis-configuration{display:block;float:left;font-size:12px;position:relative}div.vis-configuration-wrapper{display:block;width:700px}div.vis-configuration-wrapper:after{clear:both;content:"";display:block}div.vis-configuration.vis-config-option-container{background-color:#fff;border:2px solid #f7f8fa;border-radius:4px;display:block;left:10px;margin-top:20px;padding-left:5px;width:495px}div.vis-configuration.vis-config-button{background-color:#f7f8fa;border:2px solid #ceced0;border-radius:4px;cursor:pointer;display:block;height:25px;left:10px;line-height:25px;margin-bottom:30px;margin-top:20px;padding-left:5px;vertical-align:middle;width:495px}div.vis-configuration.vis-config-button.hover{background-color:#4588e6;border:2px solid #214373;color:#fff}div.vis-configuration.vis-config-item{display:block;float:left;height:25px;line-height:25px;vertical-align:middle;width:495px}div.vis-configuration.vis-config-item.vis-config-s2{background-color:#f7f8fa;border-radius:3px;left:10px;padding-left:5px}div.vis-configuration.vis-config-item.vis-config-s3{background-color:#e4e9f0;border-radius:3px;left:20px;padding-left:5px}div.vis-configuration.vis-config-item.vis-config-s4{background-color:#cfd8e6;border-radius:3px;left:30px;padding-left:5px}div.vis-configuration.vis-config-header{font-size:18px;font-weight:700}div.vis-configuration.vis-config-label{height:25px;line-height:25px;width:120px}div.vis-configuration.vis-config-label.vis-config-s3{width:110px}div.vis-configuration.vis-config-label.vis-config-s4{width:100px}div.visLine truncated
|
||||
<script>/**
|
||||
* vis-network
|
||||
* https://visjs.github.io/vis-network/
|
||||
*
|
||||
* A dynamic, browser-based visualization library.
|
||||
*
|
||||
* @version 9.1.2
|
||||
* @date 2022-03-28T20:17:35.342Z
|
||||
*
|
||||
* @copyright (c) 2011-2017 Almende B.V, http://almende.com
|
||||
* @copyright (c) 2017-2019 visjs contributors, https://github.com/visjs
|
||||
*
|
||||
* @license
|
||||
* vis.js is dual licensed under both
|
||||
*
|
||||
* 1. The Apache 2.0 License
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* and
|
||||
*
|
||||
* 2. The MIT License
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
* vis.js may be distributed under either license.
|
||||
*/
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).vis=t.vis||{})}(this,(function(t){"use strict";var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},i=function(t){return t&&t.Math==Math&&t},n=i("object"==typeof globalThis&&globalThis)||i("object"==typeof window&&window)||i("object"==typeof self&&self)||i("object"==typeof e&&e)||function(){return this}()||Function("return this")(),o=function(t){try{return!!t()}catch(t){return!0}},r=!o((function(){var t=function(){}.bind();return"function"!=typeof t||t.hasOwnProperty("prototype")})),s=r,a=Function.prototype,h=a.apply,l=a.call,d="object"==typeof Reflect&&Reflect.apply||(s?l.bind(h):function(){return l.apply(h,arguments)}),c=r,u=Function.prototype,f=u.bind,p=u.call,v=c&&f.bind(p,p),g=c?function(t){return t&&v(t)}:function(t){return t&&function(){return p.apply(t,arguments)}},y=function(t){return"function"==typeof t},m={},b=!o((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]})),w=r,k=Function.prototype.call,_=w?k.bind(k):function(){return k.apply(k,arguments)},x={},E={}.propertyIsEnumerable,O=Object.getOwnPropertyDescriptor,C=O&&!E.call({1:2},1);x.f=C?function(t){var e=O(this,t);return!!e&&e.enumerable}:E;var S,T,M=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}},P=g,D=P({}.toString),I=P("".slice),B=function(t){return I(D(t),8,-1)},z=g,N=o,F=B,A=n.Object,j=z("".split),R=N((function(){return!A("z").propertyIsEnumerable(0)}))?function(t){return"String"==F(t)?j(t,""):A(t)}:A,L=n.TypeError,H=function(t){if(null==t)throw L("Can't call method on "+t);return t},W=R,q=H,V=function(t){return W(q(t))},U=y,Y=function(t){return"object"==typeof t?null!==t:U(t)},X={},G=X,K=n,$=y,Z=function(t){return $(t)?t:void 0},Q=function(t,e){return arguments.length<2?Z(G[t])||Z(K[t]):G[t]&&G[t][e]||K[t]&&K[t][e]},J=g({}.isPrototypeOf),tt=Q("navigator","userAgent")||"",et=n,it=tt,nt=et.process,ot=et.Deno,rt=nt&&nt.versions||ot&&ot.version,st=rt&&rt.v8;st&&(T=(S=st.split("."))[0]>0&&S[0]<4?1:+(S[0]+S[1])),!T&&it&&(!(S=it.match(/Edge\/(\d+)/))||S[1]>=74)&&(S=it.match(/Chrome\/(\d+)/))&&(T=+S[1]);var at=T,ht=at,lt=o,dt=!!Object.getOwnPropertySymbols&&!lt((function(){var t=Symbol();return!String(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&ht&&ht<41})),ct=dt&&!Symbol.sham&&"symbol"==typeof Symbol.iterator,ut=Q,ft=y,pt=J,vt=ct,gt=n.Object,yt=vt?function(t){return"symbol"==typeof t}:function(t){var e=ut("Symbol");return ft(e)&&pt(e.prototype,gt(t))},mt=n.String,bt=function(t){try{return mt(t)}catch(t){return"Object"}},wt=y,kt=bt,_t=n.TypeError,xt=function(t){if(wt(t))return t;throw _t(kt(t)+" is not a function")},Et=xt,Ot=function(t,e){var i=t[e];return null==i?void 0:Et(i)},Ct=_,St=y,Tt=Y,Mt=n.TypeError,Pt={exports:{}},Dt=n,It=Object.defineProperty,Bt=function(t,e){try{It(Dt,t,{value:e,configurable:!0,writable:!0})}catch(i){Dt[t]=e}return e},zt="__core-js_shared__",Nt=n[zt]||Bt(zt,{}),Ft=Nt;(Pt.exports=function(t,e){return Ft[t]||(Ft[t]=void 0!==e?e:{})})("versions",[]).push({version:"3.21.1",mode:"pure",copyright:"© 2014-2022 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.21.1/LICENSE",source:"https://github.com/zloirock/core-js"});var At=H,jt=n.Object,Rt=function(t){return jt(At(t))},Lt=Rt,Ht=g({}.hasOwnProperty),Wt=Object.hasOwn||function(t,e){return Ht(Lt(t),e)},qt=g,Vt=0,Ut=Math.random(),Yt=qt(1..toString),Xt=function(t){return"Symbol("+(void 0===t?"":t)+")_"+Yt(++Vt+Ut,36)},Gt=n,Kt=Pt.exports,$t=Wt,Zt=Xt,Qt=dt,Jt=ct,te=Kt("wks"),ee=Gt.Symbol,ie=ee&&ee.for,ne=Jt?ee:ee&&ee.withoutSetter||Zt,oe=function(t){if(!$t(te,t)||!Qt&&"string"!=typeof te[t]){var e="Symbol."+t;Qt&&$t(ee,t)?te[t]=ee[t]:te[t]=Jt&&ie?ie(e):ne(e)}return te[t]},re=_,se=Y,ae=yt,he=Ot,le=function(t,e){var i,n;if("string"===e&&St(i=t.toString)&&!Tt(n=Ct(i,t)))return n;if(St(i=t.valueOf)&&!Tt(n=Ct(i,t)))return n;if("string"!==e&&St(i=t.toString)&&!Tt(n=Ct(i,t)))return n;throw Mt("Can't convert object to primitive value")},de=oe,ce=n.TypeError,ue=de("toPrimitive"),fe=function(t,e){if(!se(t)||ae(t))return t;var i,n=he(t,ue);if(n){if(void 0===e&&(e="default"),i=re(n,t,e),!se(i)||ae(i))return i;throw ce("Can't convert object to primitive value")}return void 0===e&&(e="number"),le(t,e)},pe=yt,ve=function(t){var e=fe(t,"string");return pe(e)?e:e+""},ge=Y,ye=n.document,me=ge(ye)&&ge(ye.createElement),be=function(t){return me?ye.createElement(t):{}},we=be,ke=!b&&!o((function(){return 7!=Object.defineProperty(we("div"),"a",{get:function(){return 7}}).a})),_e=b,xe=_,Ee=x,Oe=M,Ce=V,Se=ve,Te=Wt,Me=ke,Pe=Object.getOwnPropertyDescriptor;m.f=_e?Pe:function(t,e){if(t=Ce(t),e=Se(e),Me)try{return Pe(t,e)}catch(t){}if(Te(t,e))return Oe(!xe(Ee.f,t,e),t[e])};var De=o,Ie=y,Be=/#|\.prototype\./,ze=functiLine truncated
|
||||
//# sourceMappingURL=vis-network.min.js.map</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: 1000px;
|
||||
height: 1000px;
|
||||
background-color: #ffffff;
|
||||
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": "#00509b", "id": 1, "label": 1, "shape": "dot", "size": 10}, {"color": "#00509b", "id": 4, "label": 4, "shape": "dot", "size": 10}, {"color": "#00509b", "id": 2, "label": 2, "shape": "dot", "size": 10}, {"color": "#00509b", "id": 3, "label": 3, "shape": "dot", "size": 10}, {"color": "#00509b", "id": 5, "label": 5, "shape": "dot", "size": 10}, {"color": "#00509b", "id": 6, "label": 6, "shape": "dot", "size": 10}, {"color": "#00509b", "id": 7, "label": 7, "shape": "dot", "size": 10}]);
|
||||
edges = new vis.DataSet([{"from": 1, "to": 4, "width": 1}, {"from": 2, "to": 4, "width": 1}, {"from": 3, "to": 4, "width": 1}, {"from": 4, "to": 5, "width": 1}, {"from": 5, "to": 6, "width": 1}, {"from": 5, "to": 7, "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": false
|
||||
},
|
||||
"edges": {
|
||||
"color": {
|
||||
"inherit": true
|
||||
},
|
||||
"smooth": {
|
||||
"enabled": true,
|
||||
"type": "dynamic"
|
||||
}
|
||||
},
|
||||
"interaction": {
|
||||
"dragNodes": true,
|
||||
"hideEdgesOnDrag": false,
|
||||
"hideNodesOnDrag": false
|
||||
},
|
||||
"physics": {
|
||||
"enabled": true,
|
||||
"stabilization": {
|
||||
"enabled": true,
|
||||
"fit": true,
|
||||
"iterations": 1000,
|
||||
"onlyDynamicEdges": false,
|
||||
"updateInterval": 50
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return network;
|
||||
|
||||
}
|
||||
drawGraph();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
+377
@@ -0,0 +1,377 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<script>function neighbourhoodHighlight(params) {
|
||||
// console.log("in nieghbourhoodhighlight");
|
||||
allNodes = nodes.get({ returnType: "Object" });
|
||||
// originalNodes = JSON.parse(JSON.stringify(allNodes));
|
||||
// if something is selected:
|
||||
if (params.nodes.length > 0) {
|
||||
highlightActive = true;
|
||||
var i, j;
|
||||
var selectedNode = params.nodes[0];
|
||||
var degrees = 2;
|
||||
|
||||
// mark all nodes as hard to read.
|
||||
for (let nodeId in allNodes) {
|
||||
// nodeColors[nodeId] = allNodes[nodeId].color;
|
||||
allNodes[nodeId].color = "rgba(200,200,200,0.5)";
|
||||
if (allNodes[nodeId].hiddenLabel === undefined) {
|
||||
allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
|
||||
allNodes[nodeId].label = undefined;
|
||||
}
|
||||
}
|
||||
var connectedNodes = network.getConnectedNodes(selectedNode);
|
||||
var allConnectedNodes = [];
|
||||
|
||||
// get the second degree nodes
|
||||
for (i = 1; i < degrees; i++) {
|
||||
for (j = 0; j < connectedNodes.length; j++) {
|
||||
allConnectedNodes = allConnectedNodes.concat(
|
||||
network.getConnectedNodes(connectedNodes[j])
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// all second degree nodes get a different color and their label back
|
||||
for (i = 0; i < allConnectedNodes.length; i++) {
|
||||
// allNodes[allConnectedNodes[i]].color = "pink";
|
||||
allNodes[allConnectedNodes[i]].color = "rgba(150,150,150,0.75)";
|
||||
if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
|
||||
allNodes[allConnectedNodes[i]].label =
|
||||
allNodes[allConnectedNodes[i]].hiddenLabel;
|
||||
allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// all first degree nodes get their own color and their label back
|
||||
for (i = 0; i < connectedNodes.length; i++) {
|
||||
// allNodes[connectedNodes[i]].color = undefined;
|
||||
allNodes[connectedNodes[i]].color = nodeColors[connectedNodes[i]];
|
||||
if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
|
||||
allNodes[connectedNodes[i]].label =
|
||||
allNodes[connectedNodes[i]].hiddenLabel;
|
||||
allNodes[connectedNodes[i]].hiddenLabel = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// the main node gets its own color and its label back.
|
||||
// allNodes[selectedNode].color = undefined;
|
||||
allNodes[selectedNode].color = nodeColors[selectedNode];
|
||||
if (allNodes[selectedNode].hiddenLabel !== undefined) {
|
||||
allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
|
||||
allNodes[selectedNode].hiddenLabel = undefined;
|
||||
}
|
||||
} else if (highlightActive === true) {
|
||||
// console.log("highlightActive was true");
|
||||
// reset all nodes
|
||||
for (let nodeId in allNodes) {
|
||||
// allNodes[nodeId].color = "purple";
|
||||
allNodes[nodeId].color = nodeColors[nodeId];
|
||||
// delete allNodes[nodeId].color;
|
||||
if (allNodes[nodeId].hiddenLabel !== undefined) {
|
||||
allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
|
||||
allNodes[nodeId].hiddenLabel = undefined;
|
||||
}
|
||||
}
|
||||
highlightActive = false;
|
||||
}
|
||||
|
||||
// transform the object into an array
|
||||
var updateArray = [];
|
||||
if (params.nodes.length > 0) {
|
||||
for (let nodeId in allNodes) {
|
||||
if (allNodes.hasOwnProperty(nodeId)) {
|
||||
// console.log(allNodes[nodeId]);
|
||||
updateArray.push(allNodes[nodeId]);
|
||||
}
|
||||
}
|
||||
nodes.update(updateArray);
|
||||
} else {
|
||||
// console.log("Nothing was selected");
|
||||
for (let nodeId in allNodes) {
|
||||
if (allNodes.hasOwnProperty(nodeId)) {
|
||||
// console.log(allNodes[nodeId]);
|
||||
// allNodes[nodeId].color = {};
|
||||
updateArray.push(allNodes[nodeId]);
|
||||
}
|
||||
}
|
||||
nodes.update(updateArray);
|
||||
}
|
||||
}
|
||||
|
||||
function filterHighlight(params) {
|
||||
allNodes = nodes.get({ returnType: "Object" });
|
||||
// if something is selected:
|
||||
if (params.nodes.length > 0) {
|
||||
filterActive = true;
|
||||
let selectedNodes = params.nodes;
|
||||
|
||||
// hiding all nodes and saving the label
|
||||
for (let nodeId in allNodes) {
|
||||
allNodes[nodeId].hidden = true;
|
||||
if (allNodes[nodeId].savedLabel === undefined) {
|
||||
allNodes[nodeId].savedLabel = allNodes[nodeId].label;
|
||||
allNodes[nodeId].label = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
for (let i=0; i < selectedNodes.length; i++) {
|
||||
allNodes[selectedNodes[i]].hidden = false;
|
||||
if (allNodes[selectedNodes[i]].savedLabel !== undefined) {
|
||||
allNodes[selectedNodes[i]].label = allNodes[selectedNodes[i]].savedLabel;
|
||||
allNodes[selectedNodes[i]].savedLabel = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
} else if (filterActive === true) {
|
||||
// reset all nodes
|
||||
for (let nodeId in allNodes) {
|
||||
allNodes[nodeId].hidden = false;
|
||||
if (allNodes[nodeId].savedLabel !== undefined) {
|
||||
allNodes[nodeId].label = allNodes[nodeId].savedLabel;
|
||||
allNodes[nodeId].savedLabel = undefined;
|
||||
}
|
||||
}
|
||||
filterActive = false;
|
||||
}
|
||||
|
||||
// transform the object into an array
|
||||
var updateArray = [];
|
||||
if (params.nodes.length > 0) {
|
||||
for (let nodeId in allNodes) {
|
||||
if (allNodes.hasOwnProperty(nodeId)) {
|
||||
updateArray.push(allNodes[nodeId]);
|
||||
}
|
||||
}
|
||||
nodes.update(updateArray);
|
||||
} else {
|
||||
for (let nodeId in allNodes) {
|
||||
if (allNodes.hasOwnProperty(nodeId)) {
|
||||
updateArray.push(allNodes[nodeId]);
|
||||
}
|
||||
}
|
||||
nodes.update(updateArray);
|
||||
}
|
||||
}
|
||||
|
||||
function selectNode(nodes) {
|
||||
network.selectNodes(nodes);
|
||||
neighbourhoodHighlight({ nodes: nodes });
|
||||
return nodes;
|
||||
}
|
||||
|
||||
function selectNodes(nodes) {
|
||||
network.selectNodes(nodes);
|
||||
filterHighlight({nodes: nodes});
|
||||
return nodes;
|
||||
}
|
||||
|
||||
function highlightFilter(filter) {
|
||||
let selectedNodes = []
|
||||
let selectedProp = filter['property']
|
||||
if (filter['item'] === 'node') {
|
||||
let allNodes = nodes.get({ returnType: "Object" });
|
||||
for (let nodeId in allNodes) {
|
||||
if (allNodes[nodeId][selectedProp] && filter['value'].includes((allNodes[nodeId][selectedProp]).toString())) {
|
||||
selectedNodes.push(nodeId)
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (filter['item'] === 'edge'){
|
||||
let allEdges = edges.get({returnType: 'object'});
|
||||
// check if the selected property exists for selected edge and select the nodes connected to the edge
|
||||
for (let edge in allEdges) {
|
||||
if (allEdges[edge][selectedProp] && filter['value'].includes((allEdges[edge][selectedProp]).toString())) {
|
||||
selectedNodes.push(allEdges[edge]['from'])
|
||||
selectedNodes.push(allEdges[edge]['to'])
|
||||
}
|
||||
}
|
||||
}
|
||||
selectNodes(selectedNodes)
|
||||
}</script>
|
||||
<style>.vis-overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}div.vis-color-picker{background-color:#fff;border-radius:15px;box-shadow:0 0 10px 0 rgba(0,0,0,.5);display:none;height:444px;left:30px;margin-left:30px;margin-top:-140px;padding:10px;position:absolute;top:0;width:310px;z-index:1}div.vis-color-picker div.vis-arrow{left:5px;position:absolute;top:147px}div.vis-color-picker div.vis-arrow:after,div.vis-color-picker div.vis-arrow:before{border:solid transparent;content:" ";height:0;pointer-events:none;position:absolute;right:100%;top:50%;width:0}div.vis-color-picker div.vis-arrow:after{border-color:hsla(0,0%,100%,0) #fff hsla(0,0%,100%,0) hsla(0,0%,100%,0);border-width:30px;margin-top:-30px}div.vis-color-picker div.vis-color{cursor:pointer;height:289px;position:absolute;width:289px}div.vis-color-picker div.vis-brightness{position:absolute;top:313px}div.vis-color-picker div.vis-opacity{position:absolute;top:350px}div.vis-color-picker div.vis-selector{background:#4c4c4c;background:-moz-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4c4c4c),color-stop(12%,#595959),color-stop(25%,#666),color-stop(39%,#474747),color-stop(50%,#2c2c2c),color-stop(51%,#000),color-stop(60%,#111),color-stop(76%,#2b2b2b),color-stop(91%,#1c1c1c),color-stop(100%,#131313));background:-webkit-linear-gradient(top,#4c4c4c,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313);background:-o-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-ms-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:linear-gradient(180deg,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313);border:1px solid #fff;border-radius:15px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c",endColorstr="#131313",GradientType=0);height:15px;left:137px;position:absolute;top:137px;width:15px}div.vis-color-picker div.vis-new-color{left:159px;padding-right:2px;text-align:right}div.vis-color-picker div.vis-initial-color,div.vis-color-picker div.vis-new-color{border:1px solid rgba(0,0,0,.1);border-radius:5px;color:rgba(0,0,0,.4);font-size:10px;height:20px;line-height:20px;position:absolute;top:380px;vertical-align:middle;width:140px}div.vis-color-picker div.vis-initial-color{left:10px;padding-left:2px;text-align:left}div.vis-color-picker div.vis-label{left:10px;position:absolute;width:300px}div.vis-color-picker div.vis-label.vis-brightness{top:300px}div.vis-color-picker div.vis-label.vis-opacity{top:338px}div.vis-color-picker div.vis-button{background-color:#f7f7f7;border:2px solid #d9d9d9;border-radius:10px;cursor:pointer;height:25px;line-height:25px;position:absolute;text-align:center;top:410px;vertical-align:middle;width:68px}div.vis-color-picker div.vis-button.vis-cancel{left:5px}div.vis-color-picker div.vis-button.vis-load{left:82px}div.vis-color-picker div.vis-button.vis-apply{left:159px}div.vis-color-picker div.vis-button.vis-save{left:236px}div.vis-color-picker input.vis-range{height:20px;width:290px}div.vis-configuration{display:block;float:left;font-size:12px;position:relative}div.vis-configuration-wrapper{display:block;width:700px}div.vis-configuration-wrapper:after{clear:both;content:"";display:block}div.vis-configuration.vis-config-option-container{background-color:#fff;border:2px solid #f7f8fa;border-radius:4px;display:block;left:10px;margin-top:20px;padding-left:5px;width:495px}div.vis-configuration.vis-config-button{background-color:#f7f8fa;border:2px solid #ceced0;border-radius:4px;cursor:pointer;display:block;height:25px;left:10px;line-height:25px;margin-bottom:30px;margin-top:20px;padding-left:5px;vertical-align:middle;width:495px}div.vis-configuration.vis-config-button.hover{background-color:#4588e6;border:2px solid #214373;color:#fff}div.vis-configuration.vis-config-item{display:block;float:left;height:25px;line-height:25px;vertical-align:middle;width:495px}div.vis-configuration.vis-config-item.vis-config-s2{background-color:#f7f8fa;border-radius:3px;left:10px;padding-left:5px}div.vis-configuration.vis-config-item.vis-config-s3{background-color:#e4e9f0;border-radius:3px;left:20px;padding-left:5px}div.vis-configuration.vis-config-item.vis-config-s4{background-color:#cfd8e6;border-radius:3px;left:30px;padding-left:5px}div.vis-configuration.vis-config-header{font-size:18px;font-weight:700}div.vis-configuration.vis-config-label{height:25px;line-height:25px;width:120px}div.vis-configuration.vis-config-label.vis-config-s3{width:110px}div.vis-configuration.vis-config-label.vis-config-s4{width:100px}div.visLine truncated
|
||||
<script>/**
|
||||
* vis-network
|
||||
* https://visjs.github.io/vis-network/
|
||||
*
|
||||
* A dynamic, browser-based visualization library.
|
||||
*
|
||||
* @version 9.1.2
|
||||
* @date 2022-03-28T20:17:35.342Z
|
||||
*
|
||||
* @copyright (c) 2011-2017 Almende B.V, http://almende.com
|
||||
* @copyright (c) 2017-2019 visjs contributors, https://github.com/visjs
|
||||
*
|
||||
* @license
|
||||
* vis.js is dual licensed under both
|
||||
*
|
||||
* 1. The Apache 2.0 License
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* and
|
||||
*
|
||||
* 2. The MIT License
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
* vis.js may be distributed under either license.
|
||||
*/
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).vis=t.vis||{})}(this,(function(t){"use strict";var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},i=function(t){return t&&t.Math==Math&&t},n=i("object"==typeof globalThis&&globalThis)||i("object"==typeof window&&window)||i("object"==typeof self&&self)||i("object"==typeof e&&e)||function(){return this}()||Function("return this")(),o=function(t){try{return!!t()}catch(t){return!0}},r=!o((function(){var t=function(){}.bind();return"function"!=typeof t||t.hasOwnProperty("prototype")})),s=r,a=Function.prototype,h=a.apply,l=a.call,d="object"==typeof Reflect&&Reflect.apply||(s?l.bind(h):function(){return l.apply(h,arguments)}),c=r,u=Function.prototype,f=u.bind,p=u.call,v=c&&f.bind(p,p),g=c?function(t){return t&&v(t)}:function(t){return t&&function(){return p.apply(t,arguments)}},y=function(t){return"function"==typeof t},m={},b=!o((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]})),w=r,k=Function.prototype.call,_=w?k.bind(k):function(){return k.apply(k,arguments)},x={},E={}.propertyIsEnumerable,O=Object.getOwnPropertyDescriptor,C=O&&!E.call({1:2},1);x.f=C?function(t){var e=O(this,t);return!!e&&e.enumerable}:E;var S,T,M=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}},P=g,D=P({}.toString),I=P("".slice),B=function(t){return I(D(t),8,-1)},z=g,N=o,F=B,A=n.Object,j=z("".split),R=N((function(){return!A("z").propertyIsEnumerable(0)}))?function(t){return"String"==F(t)?j(t,""):A(t)}:A,L=n.TypeError,H=function(t){if(null==t)throw L("Can't call method on "+t);return t},W=R,q=H,V=function(t){return W(q(t))},U=y,Y=function(t){return"object"==typeof t?null!==t:U(t)},X={},G=X,K=n,$=y,Z=function(t){return $(t)?t:void 0},Q=function(t,e){return arguments.length<2?Z(G[t])||Z(K[t]):G[t]&&G[t][e]||K[t]&&K[t][e]},J=g({}.isPrototypeOf),tt=Q("navigator","userAgent")||"",et=n,it=tt,nt=et.process,ot=et.Deno,rt=nt&&nt.versions||ot&&ot.version,st=rt&&rt.v8;st&&(T=(S=st.split("."))[0]>0&&S[0]<4?1:+(S[0]+S[1])),!T&&it&&(!(S=it.match(/Edge\/(\d+)/))||S[1]>=74)&&(S=it.match(/Chrome\/(\d+)/))&&(T=+S[1]);var at=T,ht=at,lt=o,dt=!!Object.getOwnPropertySymbols&&!lt((function(){var t=Symbol();return!String(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&ht&&ht<41})),ct=dt&&!Symbol.sham&&"symbol"==typeof Symbol.iterator,ut=Q,ft=y,pt=J,vt=ct,gt=n.Object,yt=vt?function(t){return"symbol"==typeof t}:function(t){var e=ut("Symbol");return ft(e)&&pt(e.prototype,gt(t))},mt=n.String,bt=function(t){try{return mt(t)}catch(t){return"Object"}},wt=y,kt=bt,_t=n.TypeError,xt=function(t){if(wt(t))return t;throw _t(kt(t)+" is not a function")},Et=xt,Ot=function(t,e){var i=t[e];return null==i?void 0:Et(i)},Ct=_,St=y,Tt=Y,Mt=n.TypeError,Pt={exports:{}},Dt=n,It=Object.defineProperty,Bt=function(t,e){try{It(Dt,t,{value:e,configurable:!0,writable:!0})}catch(i){Dt[t]=e}return e},zt="__core-js_shared__",Nt=n[zt]||Bt(zt,{}),Ft=Nt;(Pt.exports=function(t,e){return Ft[t]||(Ft[t]=void 0!==e?e:{})})("versions",[]).push({version:"3.21.1",mode:"pure",copyright:"© 2014-2022 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.21.1/LICENSE",source:"https://github.com/zloirock/core-js"});var At=H,jt=n.Object,Rt=function(t){return jt(At(t))},Lt=Rt,Ht=g({}.hasOwnProperty),Wt=Object.hasOwn||function(t,e){return Ht(Lt(t),e)},qt=g,Vt=0,Ut=Math.random(),Yt=qt(1..toString),Xt=function(t){return"Symbol("+(void 0===t?"":t)+")_"+Yt(++Vt+Ut,36)},Gt=n,Kt=Pt.exports,$t=Wt,Zt=Xt,Qt=dt,Jt=ct,te=Kt("wks"),ee=Gt.Symbol,ie=ee&&ee.for,ne=Jt?ee:ee&&ee.withoutSetter||Zt,oe=function(t){if(!$t(te,t)||!Qt&&"string"!=typeof te[t]){var e="Symbol."+t;Qt&&$t(ee,t)?te[t]=ee[t]:te[t]=Jt&&ie?ie(e):ne(e)}return te[t]},re=_,se=Y,ae=yt,he=Ot,le=function(t,e){var i,n;if("string"===e&&St(i=t.toString)&&!Tt(n=Ct(i,t)))return n;if(St(i=t.valueOf)&&!Tt(n=Ct(i,t)))return n;if("string"!==e&&St(i=t.toString)&&!Tt(n=Ct(i,t)))return n;throw Mt("Can't convert object to primitive value")},de=oe,ce=n.TypeError,ue=de("toPrimitive"),fe=function(t,e){if(!se(t)||ae(t))return t;var i,n=he(t,ue);if(n){if(void 0===e&&(e="default"),i=re(n,t,e),!se(i)||ae(i))return i;throw ce("Can't convert object to primitive value")}return void 0===e&&(e="number"),le(t,e)},pe=yt,ve=function(t){var e=fe(t,"string");return pe(e)?e:e+""},ge=Y,ye=n.document,me=ge(ye)&&ge(ye.createElement),be=function(t){return me?ye.createElement(t):{}},we=be,ke=!b&&!o((function(){return 7!=Object.defineProperty(we("div"),"a",{get:function(){return 7}}).a})),_e=b,xe=_,Ee=x,Oe=M,Ce=V,Se=ve,Te=Wt,Me=ke,Pe=Object.getOwnPropertyDescriptor;m.f=_e?Pe:function(t,e){if(t=Ce(t),e=Se(e),Me)try{return Pe(t,e)}catch(t){}if(Te(t,e))return Oe(!xe(Ee.f,t,e),t[e])};var De=o,Ie=y,Be=/#|\.prototype\./,ze=functiLine truncated
|
||||
//# sourceMappingURL=vis-network.min.js.map</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: 1000px;
|
||||
height: 1000px;
|
||||
background-color: #ffffff;
|
||||
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([{"branche": "Branche 1", "color": "#87CEEB", "id": 1, "label": "Firma 1", "land": "Land 1", "shape": "dot", "size": 20, "title": "Firma 1\nAnzahl Verbindungen: 3"}, {"branche": "Branche 1", "color": "#87CEEB", "id": 2, "label": "Firma 2", "land": "Land 2", "shape": "dot", "size": 30, "title": "Firma 2\nAnzahl Verbindungen: 5"}, {"branche": "Branche 1", "color": "#87CEEB", "id": 3, "label": "Firma 3", "land": "Land 3", "shape": "dot", "size": 15, "title": "Firma 3\nAnzahl Verbindungen: 2"}, {"branche": "Branche 2", "color": "#0f4c81", "id": 6, "label": "Firma 6", "land": "Land 3", "shape": "dot", "size": 25, "title": "Firma 6\nAnzahl Verbindungen: 4"}, {"branche": "Branche 2", "color": "#0f4c81", "id": 5, "label": "Firma 5", "land": "Land 1", "shape": "dot", "size": 15, "title": "Firma 5\nAnzahl Verbindungen: 2"}, {"branche": "Branche 2", "color": "#0f4c81", "id": 4, "label": "Firma 4", "land": "Land 4", "shape": "dot", "size": 10, "title": "Firma 4\nAnzahl Verbindungen: 1"}, {"branche": "Branche 3", "color": "#B2FFFF", "id": 7, "label": "Firma 7", "land": "Land 3", "shape": "dot", "size": 10, "title": "Firma 7\nAnzahl Verbindungen: 1"}, {"branche": "Branche 3", "color": "#B2FFFF", "id": 8, "label": "Firma 8", "land": "Land 2", "shape": "dot", "size": 15, "title": "Firma 8\nAnzahl Verbindungen: 2"}, {"branche": "Branche 4", "color": "#191970", "id": 9, "label": "Firma 9", "land": "Land 1", "shape": "dot", "size": 15, "title": "Firma 9\nAnzahl Verbindungen: 2"}, {"branche": "Branche 4", "color": "#191970", "id": 10, "label": "Firma 10", "land": "Land 4", "shape": "dot", "size": 15, "title": "Firma 10\nAnzahl Verbindungen: 2"}]);
|
||||
edges = new vis.DataSet([{"arrows": "false", "from": 1, "label": "beziehung1", "to": 2, "width": 1}, {"arrows": "false", "from": 1, "label": "beziehung3", "to": 3, "width": 1}, {"arrows": "false", "from": 1, "label": "beziehung2", "to": 6, "width": 1}, {"arrows": "false", "from": 2, "label": "beziehung2", "to": 5, "width": 1}, {"arrows": "false", "from": 2, "label": "beziehung4", "to": 5, "width": 1}, {"arrows": "false", "from": 2, "label": "beziehung3", "to": 4, "width": 1}, {"arrows": "false", "from": 2, "label": "beziehung4", "to": 6, "width": 1}, {"arrows": "false", "from": 3, "label": "beziehung2", "to": 7, "width": 1}, {"arrows": "false", "from": 6, "label": "beziehung1", "to": 8, "width": 1}, {"arrows": "false", "from": 6, "label": "beziehung1", "to": 9, "width": 1}, {"arrows": "false", "from": 8, "label": "beziehung4", "to": 10, "width": 1}, {"arrows": "false", "from": 9, "label": "beziehung3", "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": false
|
||||
},
|
||||
"edges": {
|
||||
"color": "grey",
|
||||
"smooth": {
|
||||
"enabled": true,
|
||||
"type": "dynamic"
|
||||
}
|
||||
},
|
||||
"interaction": {
|
||||
"dragNodes": true,
|
||||
"hideEdgesOnDrag": false,
|
||||
"hideNodesOnDrag": false
|
||||
},
|
||||
"physics": {
|
||||
"barnesHut": {
|
||||
"avoidOverlap": 0,
|
||||
"centralGravity": 0.3,
|
||||
"damping": 0.09,
|
||||
"gravitationalConstant": -8000,
|
||||
"springConstant": 0.1,
|
||||
"springLength": 200
|
||||
},
|
||||
"enabled": true,
|
||||
"stabilization": {
|
||||
"enabled": true,
|
||||
"fit": true,
|
||||
"iterations": 1000,
|
||||
"onlyDynamicEdges": false,
|
||||
"updateInterval": 50
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
|
||||
network.on("click", neighbourhoodHighlight);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return network;
|
||||
|
||||
}
|
||||
drawGraph();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
+457
@@ -0,0 +1,457 @@
|
||||
{
|
||||
"cells": [
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"# Visualisierung eines Netzwerks\n",
|
||||
"\n",
|
||||
"In diesem Beispiel wird ein Graph mit networkx erstellt und anschließend mit pyvis visualisiert. Der Graph basiert auf Beispieldaten. Es werden erste Optionen in den Bereichen Größe, Farbe und Form der Knoten und Mouse-Over-Texte gezeigt.\n",
|
||||
"\n",
|
||||
"Der Code basiert auf den Dokumentationen der beiden Bibliotheken:\n",
|
||||
"- [Networkx Dokumentation](https://networkx.org/documentation/stable/)\n",
|
||||
"- [Pyvis Dokumentation](https://pyvis.readthedocs.io/en/latest/index.html)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Installation der Bibliotheken\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": 1,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"Requirement already satisfied: networkx in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (2.6.3)\n",
|
||||
"Requirement already satisfied: pyvis in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (0.3.2)\n",
|
||||
"Requirement already satisfied: jinja2>=2.9.6 in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from pyvis) (2.11.3)\n",
|
||||
"Requirement already satisfied: networkx>=1.11 in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from pyvis) (2.6.3)\n",
|
||||
"Requirement already satisfied: ipython>=5.3.0 in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from pyvis) (7.29.0)\n",
|
||||
"Requirement already satisfied: jsonpickle>=1.4.1 in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from pyvis) (3.0.1)\n",
|
||||
"Requirement already satisfied: backcall in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from ipython>=5.3.0->pyvis) (0.2.0)\n",
|
||||
"Requirement already satisfied: pexpect>4.3 in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from ipython>=5.3.0->pyvis) (4.8.0)\n",
|
||||
"Requirement already satisfied: jedi>=0.16 in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from ipython>=5.3.0->pyvis) (0.18.0)\n",
|
||||
"Requirement already satisfied: traitlets>=4.2 in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from ipython>=5.3.0->pyvis) (5.1.0)\n",
|
||||
"Requirement already satisfied: decorator in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from ipython>=5.3.0->pyvis) (5.1.0)\n",
|
||||
"Requirement already satisfied: prompt-toolkit!=3.0.0,!=3.0.1,<3.1.0,>=2.0.0 in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from ipython>=5.3.0->pyvis) (3.0.20)\n",
|
||||
"Requirement already satisfied: matplotlib-inline in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from ipython>=5.3.0->pyvis) (0.1.2)\n",
|
||||
"Requirement already satisfied: appnope in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from ipython>=5.3.0->pyvis) (0.1.2)\n",
|
||||
"Requirement already satisfied: pygments in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from ipython>=5.3.0->pyvis) (2.10.0)\n",
|
||||
"Requirement already satisfied: pickleshare in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from ipython>=5.3.0->pyvis) (0.7.5)\n",
|
||||
"Requirement already satisfied: setuptools>=18.5 in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from ipython>=5.3.0->pyvis) (58.0.4)\n",
|
||||
"Requirement already satisfied: parso<0.9.0,>=0.8.0 in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from jedi>=0.16->ipython>=5.3.0->pyvis) (0.8.2)\n",
|
||||
"Requirement already satisfied: MarkupSafe>=0.23 in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from jinja2>=2.9.6->pyvis) (1.1.1)\n",
|
||||
"Requirement already satisfied: ptyprocess>=0.5 in /Users/kim/opt/anaconda3/lib/python3.9/site-packages (from pexpect>4.3->ipython>=5.3.0->pyvis) (0.7.0)\n",
|
||||
"Requirement already satisfied: wcwidth in /Users/kim/opt/anaconda3/lib/python3.9/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"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"# install networkx and pyvis using pip\n",
|
||||
"!pip install networkx\n",
|
||||
"!pip install pyvis"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"## Erstellen eines Netzwerks mit Networkx\n",
|
||||
"\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 2,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0]"
|
||||
]
|
||||
},
|
||||
"execution_count": 2,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"import networkx as nx\n",
|
||||
"\n",
|
||||
"# create graph and use MultiGraph for nodes with multiple edges\n",
|
||||
"G = nx.MultiGraph()\n",
|
||||
"\n",
|
||||
"# create list of nodes with attributes as a dictionary\n",
|
||||
"nodes = [(1, {'label': 'Firma 1', 'branche': 'Branche 1', 'land': 'Land 1'}), \n",
|
||||
" (2, {'label': 'Firma 2', 'branche': 'Branche 1', 'land': 'Land 2'}),\n",
|
||||
" (3, {'label': 'Firma 3', 'branche': 'Branche 1', 'land': 'Land 3'}),\n",
|
||||
" (4, {'label': 'Firma 4', 'branche': 'Branche 2', 'land': 'Land 4'}),\n",
|
||||
" (5, {'label': 'Firma 5', 'branche': 'Branche 2', 'land': 'Land 1'}),\n",
|
||||
" (6, {'label': 'Firma 6', 'branche': 'Branche 2', 'land': 'Land 3'}),\n",
|
||||
" (7, {'label': 'Firma 7', 'branche': 'Branche 3', 'land': 'Land 3'}),\n",
|
||||
" (8, {'label': 'Firma 8', 'branche': 'Branche 3', 'land': 'Land 2'}),\n",
|
||||
" (9, {'label': 'Firma 9', 'branche': 'Branche 4', 'land': 'Land 1'}),\n",
|
||||
" (10, {'label': 'Firma 10', 'branche': 'Branche 4', 'land': 'Land 4'}),\n",
|
||||
" ]\n",
|
||||
"\n",
|
||||
"# create list of edges with attributes as a dictionary\n",
|
||||
"edges = [\n",
|
||||
" (1, 2, {'label': 'beziehung1'}), \n",
|
||||
" (5, 2, {'label': 'beziehung2'}), \n",
|
||||
" (1, 3, {'label': 'beziehung3'}), \n",
|
||||
" (2, 4, {'label': 'beziehung3'}), \n",
|
||||
" (2, 6, {'label': 'beziehung4'}), \n",
|
||||
" (2, 5, {'label': 'beziehung4'}),\n",
|
||||
" (8, 10, {'label': 'beziehung4'}),\n",
|
||||
" (9, 10, {'label': 'beziehung3'}), \n",
|
||||
" (3, 7, {'label': 'beziehung2'}), \n",
|
||||
" (6, 8, {'label': 'beziehung1'}), \n",
|
||||
" (6, 9, {'label': 'beziehung1'}), \n",
|
||||
" (1, 6, {'label': 'beziehung2'})\n",
|
||||
" ]\n",
|
||||
"\n",
|
||||
"# add nodes to the graph\n",
|
||||
"G.add_nodes_from(nodes)\n",
|
||||
"\n",
|
||||
"# add edges to the graph, to hide arrow heads of the edges use option arrows = 'false'\n",
|
||||
"G.add_edges_from(edges, arrows = 'false')"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Information für das Mouse-Over hinterlegen\n",
|
||||
"\n",
|
||||
"Anforderung: Wenn man mit der Maus über einzelne Knoten fährt, sollten weitere Informationen sichtbar werden\n",
|
||||
"\n",
|
||||
"Aktuelle Umsetzung: 'title' wird als String für jeden Knoten gesetzt aus Name der Firma und Anzahl der Verbindungen.\n",
|
||||
"\n",
|
||||
"Erweiterungen/offene Fragen: Weitere Stammdaten-Informationen sind möglich, sofern sie zur Verfügung stehen."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 3,
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"for node in G.nodes:\n",
|
||||
" G.nodes[node]['title'] = G.nodes[node]['label'] + '\\n' + 'Anzahl Verbindungen: ' + str(G.degree[node])"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Ändern der Größe der Knoten\n",
|
||||
"\n",
|
||||
"Anforderung: Größe in Abhängigkeit bestimmter Attribute ändern.\n",
|
||||
"\n",
|
||||
"Aktuelle Umsetzung: Setzen der Größe anhand der Anzahl der Kanten.\n",
|
||||
"\n",
|
||||
"Erweiterungen/offene Fragen: Weitere Attribute wie EBIT, Umsatz sollten möglich sein. "
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"#### Erster Test zum Bestimmen der Verbindungen und der Anzahl"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 4,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"[2, 3, 6]\n",
|
||||
"3\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"# get all nodes connected to node 1\n",
|
||||
"print(list(G.adj[1]))\n",
|
||||
"\n",
|
||||
"# get number of nodes connected to node 1\n",
|
||||
"print(G.degree[1])"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"#### Skalieren der Größe "
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 5,
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"# scaling the size of the nodes by 5*degree\n",
|
||||
"scale = 5 \n",
|
||||
"\n",
|
||||
"# getting all nodes and their number of connections\n",
|
||||
"d = dict(G.degree)\n",
|
||||
"\n",
|
||||
"# updating dict\n",
|
||||
"d.update((x, scale*(y+1)) for x, y in d.items())\n",
|
||||
"\n",
|
||||
"# setting size attribute according to created dictionary\n",
|
||||
"nx.set_node_attributes(G,d,'size')"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"## Visualisierung mit Pyvis\n",
|
||||
"\n",
|
||||
"Beim Anlegen des Netzwerks kann mit `neighborhood_highlight=True` bereits aktiviert werden, dass ein Klick auf einen Knoten benachbarte Knoten hervorhebt"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 6,
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"from pyvis.network import Network\n",
|
||||
"\n",
|
||||
"# create network, 'directed = true' allows multiple edges between nodes\n",
|
||||
"nt = Network('1000px', '1000px', neighborhood_highlight=True, notebook=True, cdn_resources='in_line', directed=True)\n",
|
||||
"\n",
|
||||
"# populates the nodes and edges data structures\n",
|
||||
"nt.from_nx(G)\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Erste Tests zum Ändern der Art und Farbe eines einzelnen Knotens\n",
|
||||
"\n",
|
||||
"Change shape of one node:\n",
|
||||
"`nt.nodes[1]['shape'] = 'square'`\n",
|
||||
"\n",
|
||||
"Change color of one node:\n",
|
||||
"`nt.nodes[1]['color'] = 'red'`"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Ändern der Farbe aller Knoten \n",
|
||||
"\n",
|
||||
"Anforderung: Ändere die Farbe basierend auf den Attributen \"Branche\" oder \"Land\"\n",
|
||||
"\n",
|
||||
"Aktuelle Umsetzung: Funktion, die die Farbe der Knoten anhand des ausgewählten Attributs (type) setzt.\n",
|
||||
"\n",
|
||||
"Erweiterungen/offene Fragen: Mögliche Branchen und Länder haben eine festcodierte Farbe, geht das generischer? Wie können weitere Attribute integriert werden?\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 7,
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"# define new function that sets the color of the nodes\n",
|
||||
"def color_type (net, type):\n",
|
||||
" ''' color_type sets the color of a network depending on an attribute of the nodes\n",
|
||||
" net: network\n",
|
||||
" type: 'branche' or 'land' '''\n",
|
||||
"\n",
|
||||
" colormap = {'Branche 1': '#87CEEB',\n",
|
||||
" 'Branche 2': '#0f4c81',\n",
|
||||
" 'Branche 3': '#B2FFFF', \n",
|
||||
" 'Branche 4': '#191970',\n",
|
||||
" 'Land 1': '#F8D568', \n",
|
||||
" 'Land 2': '#F58025', \n",
|
||||
" 'Land 3': '#CC5500', \n",
|
||||
" 'Land 4': '#C0362C'}\n",
|
||||
" for node in net.nodes:\n",
|
||||
" node['color'] = colormap[node[type]]\n",
|
||||
" return net\n",
|
||||
"\n",
|
||||
"# set color based on attribute\n",
|
||||
"nt = color_type(nt, 'branche')"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Ändern der Farbe aller Kanten\n",
|
||||
"Normalerweise übernehmen die Kanten die Farben von ihren Knoten. Mit der Option 'color' kann für alle Kanten die gleiche Farbe gesetzt werden."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 8,
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"# set all edge colors \n",
|
||||
"nt.options.edges.color = 'grey'"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Speichern des Netzwerks als HTML\n",
|
||||
"\n",
|
||||
"Die Ausrichtung und Spannkräfte des Netzwerks können mit den 'physics options' gesetzt werden."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 9,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"Netzwerk_Verflechtungsanalyse.html\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text/html": [
|
||||
"\n",
|
||||
" <iframe\n",
|
||||
" width=\"1000px\"\n",
|
||||
" height=\"1000px\"\n",
|
||||
" src=\"Netzwerk_Verflechtungsanalyse.html\"\n",
|
||||
" frameborder=\"0\"\n",
|
||||
" allowfullscreen\n",
|
||||
" \n",
|
||||
" ></iframe>\n",
|
||||
" "
|
||||
],
|
||||
"text/plain": [
|
||||
"<IPython.lib.display.IFrame at 0x10b82b940>"
|
||||
]
|
||||
},
|
||||
"execution_count": 9,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"# activate physics options to try out different solver\n",
|
||||
"#nt.show_buttons(filter_=['physics'])\n",
|
||||
"\n",
|
||||
"# set physics options\n",
|
||||
"nt.barnes_hut(gravity=-8000, central_gravity=0.3, spring_length=200, spring_strength=0.1, damping=0.09, overlap=0)\n",
|
||||
"\n",
|
||||
"# create html and save in same folder\n",
|
||||
"nt.show('Netzwerk_Verflechtungsanalyse.html')"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Erstellen eines minimalen Netzwerks"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 10,
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"Netzwerk.html\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text/html": [
|
||||
"\n",
|
||||
" <iframe\n",
|
||||
" width=\"1000px\"\n",
|
||||
" height=\"1000px\"\n",
|
||||
" src=\"Netzwerk.html\"\n",
|
||||
" frameborder=\"0\"\n",
|
||||
" allowfullscreen\n",
|
||||
" \n",
|
||||
" ></iframe>\n",
|
||||
" "
|
||||
],
|
||||
"text/plain": [
|
||||
"<IPython.lib.display.IFrame at 0x10bedbf70>"
|
||||
]
|
||||
},
|
||||
"execution_count": 10,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"import networkx as nx\n",
|
||||
"from pyvis.network import Network\n",
|
||||
"\n",
|
||||
"sn = nx.Graph()\n",
|
||||
"sn_nodes = [1,2,3,4,5,6,7]\n",
|
||||
"sn_edges = [(1,4),(2,4),(3,4),(4,5),(5,6),(5,7)]\n",
|
||||
"\n",
|
||||
"sn.add_nodes_from(sn_nodes, color = '#00509b')\n",
|
||||
"sn.add_edges_from(sn_edges)\n",
|
||||
"\n",
|
||||
"net = Network('1000px', '1000px', notebook=True, cdn_resources='in_line')\n",
|
||||
"\n",
|
||||
"net.from_nx(sn)\n",
|
||||
"net.show('Netzwerk.html')\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"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.10.1"
|
||||
},
|
||||
"orig_nbformat": 4
|
||||
},
|
||||
"nbformat": 4,
|
||||
"nbformat_minor": 2
|
||||
}
|
||||
Reference in new issue
Block a user