[Python] Dessinez un graphe orienté avec Dash Cytoscape
Je veux dessiner un graphe orienté mobile
Je voulais dessiner un graphe orienté qui peut être exécuté sur un navigateur comme visNetwork de R en Python.
NetworkX semble être célèbre en tant que bibliothèque de graphes de Python, mais cette fois j'ai pensé que Dash Cytoscape pourrait être utilisé avec une image proche du visNetwork de R, donc je vais l'échantillonner. Je vais l'écrire.
Lancez le serveur localement et vérifiez le graphique depuis le navigateur.
Cible
-
Visualisez le graphique dirigé à partir du bloc de données à deux colonnes de et vers.
-
image d'entrée
-
Image de livraison
environnement
- OS : Windows10
- Python : Python 3.8.3
- dash == 1.4.1
- dash-core-components == 1.3.1
- dash-html-components == 1.0.1
- dash-cytoscape == 0.2.0
Préparation
Préparer un bloc de données Edge avec des nœuds from et to et
app.py
import pandas as pd
edges = pd.DataFrame.from_dict({'from':['TABLE_B', 'TABLE_C', 'TABLE_D', 'TABLE_A', 'TABLE_X', 'TABLE_X'],
'to': ['TABLE_A', 'TABLE_A', 'TABLE_A','TABLE_X', 'TABLE_K', 'TABLE_Z']})
nodes = set()
Stocke le contenu du bord et du nœud dans une liste
app.py
cy_edges = []
cy_nodes = []
for index, row in edges.iterrows():
source, target = row['from'], row['to']
if source not in nodes:
nodes.add(source)
cy_nodes.append({"data": {"id": source, "label": source}})
if target not in nodes:
nodes.add(target)
cy_nodes.append({"data": {"id": target, "label": target}})
cy_edges.append({
'data': {
'source': source,
'target': target
}
})
<img width=""30%" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143058/7b672b05-fa5b-8f75-f2df-97f48e0ddfbd.png ">
Définir le style du nœud / de l'arête
app.py
stylesheet = [
{
"selector": 'node', #Pour tous les nœuds
'style': {
"opacity": 0.9,
"label": "data(label)", #Le libellé du nœud à afficher
"background-color": "#07ABA0", #couleur du nœud
"color": "#008B80" #couleur de l'étiquette du nœud
}
},
{
"selector": 'edge', #Pour tous les bords
"style": {
"target-arrow-color": "#C5D3E2", #Couleur de la flèche
"target-arrow-shape": "triangle", #Forme de flèche
"line-color": "#C5D3E2", #couleur des bords
'arrow-scale': 2, #Taille de la flèche
'curve-style': 'bezier' #Courbe par défaut-S'il s'agit de style, la flèche ne sera pas affichée, spécifiez-la
}
}]
--Il est possible de personnaliser le style de la flèche, etc. en se référant à ce qui suit. - Cytoscape Styling / Edge Arrows
--Centrer la position de la flèche
app.py
"style": {
"mid-target-arrow-color": "#C5D3E2",
"mid-target-arrow-shape": "triangle",
}
--Il est également possible d'attribuer un style à une arête ou à un nœud spécifique en définissant une condition dans "sélecteur".
app.py
stylesheet = [
{
"selector": 'node',
'style': {
"opacity": 0.9,
"label": "data(label)",
"background-color": "#07ABA0",
"color": "#008B80"
}
},
{
"selector": '[label *= "alarm"]', #Seuls les nœuds dont le libellé est alarm"red"À
'style': {
"opacity": 0.9,
"label": "data(label)",
"background-color": "red",
"color": "#008B80"
}
},
{
"selector": 'edge',
"style": {
"target-arrow-color": "#C5D3E2",
"target-arrow-shape": "triangle",
"line-color": "#C5D3E2",
'arrow-scale': 2,
'curve-style': 'bezier'
}
}
]
Définir la mise en page
app.py
app.layout = html.Div([
dcc.Dropdown(
id='dropdown-layout',
options=[
{'label': 'random',
'value': 'random'},
{'label': 'grid',
'value': 'grid'},
{'label': 'circle',
'value': 'circle'},
{'label': 'concentric',
'value': 'concentric'},
{'label': 'breadthfirst',
'value': 'breadthfirst'},
{'label': 'cose',
'value': 'cose'}
], value='grid'
),
html.Div(children=[
cyto.Cytoscape(
id='cytoscape',
elements=cy_edges + cy_nodes,
style={
'height': '95vh',
'width': '100%'
},
stylesheet=stylesheet #Donnez le style que vous avez défini précédemment
)
])
])
――Cette fois, la mise en page du graphique peut être sélectionnée dans la liste déroulante.
Créer un rappel pour mettre à jour la mise en page
app.py
@app.callback(Output('cytoscape', 'layout'),
[Input('dropdown-layout', 'value')])
def update_cytoscape_layout(layout):
return {'name': layout}
Achevée
Texte intégral
app.py
import pandas as pd
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_cytoscape as cyto
app = dash.Dash(__name__)
server = app.server
# prepare data
edges = pd.DataFrame.from_dict({'from':['earthquake', 'earthquake', 'burglary', 'alarm', 'alarm'],
'to': ['report', 'alarm', 'alarm','John Calls', 'Mary Calls']})
nodes = set()
cy_edges = []
cy_nodes = []
for index, row in edges.iterrows():
source, target = row['from'], row['to']
if source not in nodes:
nodes.add(source)
cy_nodes.append({"data": {"id": source, "label": source}})
if target not in nodes:
nodes.add(target)
cy_nodes.append({"data": {"id": target, "label": target}})
cy_edges.append({
'data': {
'source': source,
'target': target
}
})
# define stylesheet
stylesheet = [
{
"selector": 'node', #Pour tous les nœuds
'style': {
"opacity": 0.9,
"label": "data(label)", #Le libellé du nœud à afficher
"background-color": "#07ABA0", #couleur du nœud
"color": "#008B80" #couleur de l'étiquette du nœud
}
},
{
"selector": 'edge', #Pour tous les bords
"style": {
"target-arrow-color": "#C5D3E2", #Couleur de la flèche
"target-arrow-shape": "triangle", #Forme de flèche
"line-color": "#C5D3E2", #couleur des bords
'arrow-scale': 2, #Taille de la flèche
'curve-style': 'bezier' #Courbe par défaut-S'il s'agit de style, la flèche ne sera pas affichée, spécifiez-la
}
}]
# define layout
app.layout = html.Div([
dcc.Dropdown(
id='dropdown-layout',
options=[
{'label': 'random',
'value': 'random'},
{'label': 'grid',
'value': 'grid'},
{'label': 'circle',
'value': 'circle'},
{'label': 'concentric',
'value': 'concentric'},
{'label': 'breadthfirst',
'value': 'breadthfirst'},
{'label': 'cose',
'value': 'cose'}
], value='grid'
),
html.Div(children=[
cyto.Cytoscape(
id='cytoscape',
elements=cy_edges + cy_nodes,
style={
'height': '95vh',
'width': '100%'
},
stylesheet=stylesheet
)
])
])
@app.callback(Output('cytoscape', 'layout'),
[Input('dropdown-layout', 'value')])
def update_cytoscape_layout(layout):
return {'name': layout}
if __name__ == '__main__':
app.run_server(debug=False)
Courir
$ python app.py
Je pense que nous avons réalisé une visualisation du réseau comme visNetwork de R. Veuillez essayer.
référence
Qu'est-ce qu'un graphe orienté? Dash Cytoscape
-Si vous dessinez avec NetworkX
networkx_sample.py
# https://networkx.github.io/documentation/stable/auto_examples/drawing/plot_directed.html#sphx-glr-auto-examples-drawing-plot-directed-py
# Author: Rodrigo Dorantes-Gilardi ([email protected])
import matplotlib as mpl
import matplotlib.pyplot as plt
import networkx as nx
G = nx.generators.directed.random_k_out_graph(10, 3, 0.5)
pos = nx.layout.spring_layout(G)
node_sizes = [3 + 10 * i for i in range(len(G))]
M = G.number_of_edges()
edge_colors = range(2, M + 2)
edge_alphas = [(5 + i) / (M + 4) for i in range(M)]
nodes = nx.draw_networkx_nodes(G, pos, node_size=node_sizes, node_color='blue')
edges = nx.draw_networkx_edges(G, pos, node_size=node_sizes, arrowstyle='->',
arrowsize=10, edge_color=edge_colors,
edge_cmap=plt.cm.Blues, width=2)
# set alpha value for each edge
for i in range(M):
edges[i].set_alpha(edge_alphas[i])
pc = mpl.collections.PatchCollection(edges, cmap=plt.cm.Blues)
pc.set_array(edge_colors)
plt.colorbar(pc)
ax = plt.gca()
ax.set_axis_off()
plt.show()
Recommended Posts