2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Dashを利用した動的なネットワーク図作成

Last updated at Posted at 2024-03-31

目次

1.データ作成
2.networkxを利用したネットワーク図作成(html出力)
3.Dashを利用した動的ネットワーク図
3.1.ネットワークの作成
3.2.動的にするためのコード

必要なライブラリをインポート

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import networkx as nx
from pyvis.network import Network
import random
import dash
import visdcc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input,Output,State

作成するに至った経緯

システム構築のお仕事をしており、テーブルの多さとバッチ処理の多さにより、どのテーブルとバッチ処理が結びついているのかがわからず、障害時の対応が遅くなる。
そのためネットワーク図の作成を考えた。
テーブル数が多いため、静的なNW図だと文字が潰れる・探すのに時間がかかることを考えて動的なNW図作成を試みた。

1.データ作成

ダミーデータを作成する。

node_list=[]
random.seed(0)
node_nomber=50 #何個線を引くか
edge_nomber=30 #何個点を作るか
for i in range(node_nomber):
    r_,l_=random.sample(range(edge_nomber),2)
    node_list.append((str(r_),str(l_)))  #今後テーブル名を扱いため文字列に変換
node_list #[('3','12),(),(),....,()] 

orig_nodes=[] #タプル型の数字をこのリストに格納
for i in range(len(node_list)):
    orig_nodes.append(node_list[i][0])
    orig_nodes.append(node_list[i][1])
    
    
edges=[]
nodes=[]
for i in sorted(set(orig_nodes),key=float):
    nodes.append({'id':i,'label':i}) #Dash時に使用しやすいために変形
    
    
for i in set(node_list):
    edges.append({'from':i[0],'to':i[1]}) #Dash時に使用しやすいために変形
    

2.networkxを利用したネットワーク図作成(html出力)

networkxを使用したネットワーク図を作成。

G = nx.Graph() #グラフの作成
G.add_edges_from(node_list) #edgeをもとにnodeとnodeを結んでくれる
net=Network(notebook=True)
net.from_nx(G)
net.show('exsample.html') #出力

image.png

3.Dashを利用した動的ネットワーク図

Dashを利用して動的なネットワーク図を作成する。

3.1.ネットワークの作成

nodes_op=[{'label':'Full(時間がかかります)','value':'full'}] #動的に動かすためのオプションに利用する。
for i in nodes: 
    nodes_op.append({'label':i['id'],'value':i['label']}) #ノードオプションに選択させるノードを格納

app=dash.Dash()
app.layout=html.Div([html.H1('Network'),
                    html.Div([dcc.Dropdown(id='node',options=nodes_op,value='full')]),
    visdcc.Network(id='net',data={'nodes':nodes,'edges':edges},
                   options=dict(height='600px',width='100%'))])
                   #Dropdwonにノードオプションを表示させる。
                   #作成したノード、edgeをNetworkに渡す。

image.png

動的ではなく、全体のグラフとドロップダウンだけが表示される。ドロップダウンを選んでも何も起きない。

3.2.動的にするためのコード

callbackを利用して動的なネットワーク図を作成

#出力はネットワーク図とネットワークの元データ(data)
#入力はノードオプションの値
@app.callback(
    Output("net", 'data'),
    Input('node','value')) 
    
def myfun(x):
    edges_=[]
    nodes_op_=[]
    if x=='full':
        nodes_=nodes
        edges_=edges
    else:
        for i in edges:
            for j in i.values():
                if str(j)== x:
                    edges_.append(i)
        for i in edges_:
            nodes_op_.append(i['from'])
            nodes_op_.append(i['to'])
        nodes_=[]
        for i in set(nodes_op_):
            nodes_.append({'id':i,'label':i})
    r_={'nodes':nodes_,'edges':edges_}
    
    return r_

app.run_server(mode="inline",debug=True)

動的なネットワークが作成。
2を選んだ場合は隣接するノードが表示される。
image.png

以上

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?