[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

environnement

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",
        }

image.png

--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'
        }
    }
]

image.png

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

image.png

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()

image.png

Recommended Posts

[Python] Dessinez un graphe orienté avec Dash Cytoscape
Dessinez un graphique avec NetworkX
Dessinez un graphique avec networkx
Tracez un graphe avec Julia + PyQtGraph (2)
Dessinez un graphique lâche avec matplotlib
Tracez un graphique avec Julia + PyQtGraph (1)
Dessinez un graphique avec Julia + PyQtGraph (3)
Dessinez un graphique avec des pandas + XlsxWriter
Faisons un graphe avec python! !!
Dessinez un graphique avec l'interface graphique PySimple
Étudier les mathématiques avec Python: dessiner un graphe sympy (scipy) avec matplotlib
Dessinez un graphique avec PyQtGraph Part 1-Drawing
Dessinez une surface plane avec un graphique 3D matplotlib
Dessiner un graphique d'une fonction quadratique en Python
Dessinez un graphique avec des étiquettes japonaises dans Jupyter
Comment dessiner un graphique à 2 axes avec pyplot
Dessinez un graphique avec les paramètres PyQtGraph Partie 3-PlotWidget
Dessinez un graphique en traitant avec Pandas groupby
Essayez de dessiner une courbe de vie avec python
[Python] Dessinez un Mickey Mouse avec une tortue [Débutant]
Dessinez un graphique avec les paramètres PyQtGraph Part 4-PlotItem
Dessinez un graphique avec PyQtGraph Partie 6 - Affichage d'une légende
Dessiner un graphique avec python
Dessinez un graphique avec PyQtGraph Partie 5-Augmentez l'axe Y
[Python] Dessinez un diagramme de relation de balises Qiita avec NetworkX
Visualisez les données d'itinéraires ferroviaires sous forme de graphique avec Cytoscape 2
Dessinez de force quelque chose comme un organigramme avec Python, matplotlib
Dessinez un graphique avec PyQtGraph Partie 2 - Paramètres de tracé détaillés
[Python] Comment dessiner un diagramme de dispersion avec Matplotlib
Dessiner un fichier netCDF avec python
Faites une loterie avec Python
Dessinez un cœur en Python
Créer un répertoire avec python
Une note lors de la création d'un graphe dirigé à l'aide de Graphviz en Python
[Visualisation] Je veux dessiner un beau graphique avec Plotly
[Python] Qu'est-ce qu'une instruction with?
Résoudre ABC163 A ~ C avec Python
Faites fonctionner l'imprimante de reçus avec python
Manuel de graphisme Python avec Matplotlib.
Faisons une interface graphique avec python.
Résoudre ABC166 A ~ D avec Python
Dessinez une matrice de diagramme de dispersion avec python
Créez un environnement virtuel avec Python!
J'ai fait une loterie avec Python.
Dessinez un beau cercle avec numpy
Créer un environnement virtuel avec Python 3
Résoudre ABC168 A ~ C avec Python
Créer un système de recommandation avec python
Dessinez une courbe Koch avec Python Turtle
[Python] Générer un mot de passe avec Slackbot
Résoudre ABC162 A ~ C avec Python
Résoudre ABC167 A ~ C avec Python
Résoudre ABC158 A ~ C avec Python
Dessinez une illustration avec Python + OpenCV
Dessinez un diagramme CNN en Python
Faire un joli graphique avec plotly
Dessinez Riapnov Fractal avec Python, matplotlib
[Python] Hériter d'une classe avec des variables de classe
J'ai créé un démon avec Python