Hiwot
Hiwot

Reputation: 608

Working with Dash Cytoscape from data frame

Let us say, I have the following table.

df

source    target     Weight
A            B        10
A            C        8
C            F        8
B            F        6
F            D        6
B            E        4

I able to manage to plot it using networkx library. AND I would like to also give a try using Dash Cytoscope component.

I have tried the following. But not succeed yet.

app.layout = html.Div([
    html.Div([
 
        cyto.Cytoscape(
            id='org-chart',
            autoungrabify=True,
            minZoom=0.2,
            maxZoom=1,
            layout={'name': 'breadthfirst'},

            style={'width': '100%', 'height': '500px'},
            elements=
                [
                    # Nodes elements
                    {'data': {'id': x, 'label': x}} for x in df.name
                ]
                +
                [
                    # Edge elements
                    {'data': {'source': df['source'], 'target': df['target']}},
                    
                ]
        )
    ], className='six columns'),

    html.Div([
        html.Div(id='empty-div', children='')
    ],className='one column'),

], className='row')

Any help is appreciated on this.

Upvotes: 0

Views: 1267

Answers (1)

MarcZ
MarcZ

Reputation: 83

The problem is that you tried to define your edges using the entire data frame columns instead of iterating it (as you did for the nodes). Have you tried the below code ?

edges = [{'data': {'source': x, 'target': y}} for x,y in zip(df.source,df.target)]

Upvotes: 1

Related Questions