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.
Visualisez le graphique dirigé à partir du bloc de données à deux colonnes de et vers.
image d'entrée
Image de livraison
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()
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 ">
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'
}
}
]
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.
app.py
@app.callback(Output('cytoscape', 'layout'),
[Input('dropdown-layout', 'value')])
def update_cytoscape_layout(layout):
return {'name': layout}
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)
$ python app.py
Je pense que nous avons réalisé une visualisation du réseau comme visNetwork de R. Veuillez essayer.
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