Show edge weight in network graph

Dash Python
1

Hi, everyone. I am working on plotting 3D network graph (with weighted edges) based on go.Scatter3d. I know I should construct two traces which conclude nodes and edges, respectively. I want to show edge weight one the edge trace, just like showing node label on the node trace. My data structure is a little complicated, so I changed the example at link for a demo. I appreciate it much if you can help me on showing edge weight when I hover on the edge. The demo code is listed as follows.

import plotly.plotly as py
import plotly.graph_objs as go
import dash
import dash_core_components as dcc
import dash_html_components as html

# py.offline.init_notebook_mode(connected=True)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

#-----> edge 
trace1=go.Scatter3d(x=[1, 2,None, 2, 3, None],
               y=[1, 2, None, 2, 3, None],
               z=[1, 2, None, 2, 3, None],
               mode='lines',
               # weights = [1, 2] ??????????????????????
               line=dict(color='rgb(125,125,125)', width=1),
               hoverinfo='none'
               )

#------> node trace
trace2=go.Scatter3d(x=[1, 2, 3],
               y=[1, 2, 3],
               z=[1, 2, 3],
               mode='markers',
               name='actors',
               marker=dict(symbol='circle',
                             size=6,
                             colorscale='Viridis',
                             line=dict(color='rgb(50,50,50)', width=0.5)
                             ),
               text=['1', '2', '3'],
               hoverinfo='text'
               )

axis=dict(showbackground=False,
          showline=False,
          zeroline=False,
          showgrid=False,
          showticklabels=False,
          title=''
          )

layout = go.Layout(
         title="Network of coappearances of characters in Victor Hugo's novel<br> Les Miserables (3D visualization)",
         width=1000,
         height=1000,
         showlegend=False,
         scene=dict(
             xaxis=dict(axis),
             yaxis=dict(axis),
             zaxis=dict(axis),
        ),
     margin=dict(
        t=100
    ),
    hovermode='closest',
    annotations=[
           dict(
           showarrow=False,
            text="Data source: <a href='http://bost.ocks.org/mike/miserables/miserables.json'>[1] miserables.json</a>",
            xref='paper',
            yref='paper',
            x=0,
            y=0.1,
            xanchor='left',
            yanchor='bottom',
            font=dict(
            size=14
            )
            )
        ],)

data=[trace1, trace2]

app.layout = html.Div(children=[
        dcc.Graph(
            id='example-graph',
            figure={'data': data}
            ),

        ],
        style={"height" : "25%", "width" : "100%"}
    )

if __name__ == '__main__':
    app.run_server(debug=True)

Thank you in advance!

2

@Jeff
In order to display the edge weights, I suggest to calculate the x, y, z - coordinates of the edge middle points, and display on hover a text like this one 'weight = 3'

If edges is the list of tuples (i,j), with i, j the indices of edge end nodes, and
layt = G.layout('kk', dim=3) gives the node positions (layt[k] is a 3-list giving the x, y, z, coords for the k^{th} node), then the mid points of the edges will have the coords:

xtp = []
ytp = []
ztp = []
for e in edges: 
    xtp.append(0.5*(layt[e[0]][0]+ layt[e[1]][0]))
    ytp.append(0.5*(layt[e[0]][1]+ layt[e[1]][1]))
    ztp.append(0.5*(layt[e[0]][2]+ layt[e[1]][2]))

Now you can define a new Scatter3d trace for these points:

etext = [f'weight={w}' for w in edge_weights]

trace3 = go.Scatter3d(x=xtp, y=ytp, z=ztp,
                      mode='markers',
                      marker =dict(color='rgb(125,125,125)', size=1), #set the same color as for the edge lines
                      text = etext, hoverinfo='text')

It’s a bit difficult to place the mouse exactly at the edge middle, but hovering around you can have the chance to get it.

png
edge-text.png.jpg1700×1400 283 KB

2 Likes
3

Thank you so much for your explanation! I tried to do this for my own 3D scatter plot and the edge weights seemed to appear above not within my axis, if that makes sense.

Any ideas where I went wrong? One hunch I have is that I have three separate traces, one for the edges, one for the nodes, and one for the weighted edges.

Thank you so much!