# Show edge weight in network graph

**URL:** <https://community.plotly.com/t/show-edge-weight-in-network-graph/26733>\
**Category:** Dash Python\
**Created:** [August 2, 2019, 10:55am UTC](https://community.plotly.com/t/show-edge-weight-in-network-graph/26733 "2019-08-02T10:55:42Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeff](https://avatars.discourse-cdn.com/v4/letter/j/e19b73/32.png) [@Jeff](https://community.plotly.com/u/Jeff)\
**Post date:** [August 2, 2019, 10:55am UTC](https://community.plotly.com/t/show-edge-weight-in-network-graph/26733/1 "2019-08-02T10:55:42Z")

</div>

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](https://plot.ly/python/v3/3d-network-graph/) 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.

```auto
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!

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [August 4, 2019, 8:02am UTC](https://community.plotly.com/t/show-edge-weight-in-network-graph/26733/2 "2019-08-04T08:02:31Z")

</div>

@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:

```auto
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:

```auto
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/1/195317dbf4859817e5ff9d22a6ca30cc16dca572.jpeg)

---

<div class="post-metadata">

**Author:** ![jihyun.noh93](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jihyun.noh93](https://community.plotly.com/u/jihyun.noh93)\
**Post date:** [March 19, 2021, 7:37pm UTC](https://community.plotly.com/t/show-edge-weight-in-network-graph/26733/3 "2021-03-19T19:37:50Z")

</div>

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!