My edge line widths show as different widths in the dictionary, but the display shows them the same?

📊 Plotly Python
1

I have a networkx graph where I build the traces as follows:

def plot_graph(graph, pos, title='Default'):
    from plotly.offline import iplot
    from plotly.offline import init_notebook_mode
    init_notebook_mode(connected=False)
    #Define the lists of node coordinates:
    Xn = [pos[key][0] for key in pos]
    Yn = [pos[key][1] for key in pos]

    # Define the lists of node coordinates:
    trace_nodes=dict(type='scatter',
                     x=Xn, 
                     y=Yn,
                     mode='markers+text',
                     text= list(pos.keys()),
                     marker=dict(size=28, color='rgb(209, 242, 255)'),
                     hoverinfo='text')


    # Record the coordinates of edge ends:
    Xe=[]
    Ye=[]
    for e in graph.edges():
        Xe.extend([pos[e[0]][0], pos[e[1]][0], None])
        Ye.extend([pos[e[0]][1], pos[e[1]][1], None])

    # The trace_edges defines the graph edges as a Plotly trace of type scatter, mode lines. 
    # After the x-coordinates, respectively y-coordinates of the ends of an edge is inserted None, 
    # because otherwise, "the tracer" joins all edges.
    
    # Start edges_list
    edges_list=[dict(type='scatter',
              x=Xe,
              y=Ye,
              mode='lines',
              line=dict(width=edge[2]['weight']**2, color='rgb(25,25,25)')) for edge in graph.edges(data=True)]
    
  
    Xe=[]
    Ye=[]


    # Plotly layout:
    # To get a good looking graph it is recommended to define data as a list having the first element 
    # the trace corresponding to edges, and the second the trace for nodes. Otherwise the lines will 
    # be traced over the node dots.
    axis=dict(showline=False, # hide axis line, grid, ticklabels and  title
              zeroline=False,
              showgrid=False,
              showticklabels=False,
              title='' 
              )
    layout=dict(title=title,  
                font= dict(family='Balto'),
                width=900,
                height=900,
                autosize=True,
                showlegend=False,
                xaxis=axis,
                yaxis=axis,
                margin=dict(
                l=40,
                r=40,
                b=85,
                t=100,
                pad=0,

        ),
        hovermode='closest',
        plot_bgcolor='#efecea', #set background color            
        )
    import pprint
    pp = pprint.PrettyPrinter()
    pp.pprint(edges_list)
    fig = dict(data=edges_list+[trace_nodes], layout=layout)

When I print out the contents of edges_list there are three lines with a width of 1, and one with a width of 4:

[{'line': {'color': 'rgb(25,25,25)', 'width': 1},
  'mode': 'lines',
  'type': 'scatter',
  'x': [0.14918615222721016,
        0.040082285023685126,
        None,
        0.14918615222721016,
        0.2793864886275645,
        None,
        0.2793864886275645,
        0.040082285023685126,
        None,
        0.2793864886275645,
        0.4614979523548118,
        None],
  'y': [0.41934904827458686,
        0.25094422607676786,
        None,
        0.41934904827458686,
        0.21297453457417212,
        None,
        0.21297453457417212,
        0.25094422607676786,
        None,
        0.21297453457417212,
        0.11673219107447323,
        None]},
 {'line': {'color': 'rgb(25,25,25)', 'width': 1},
  'mode': 'lines',
  'type': 'scatter',
  'x': [0.14918615222721016,
        0.040082285023685126,
        None,
        0.14918615222721016,
        0.2793864886275645,
        None,
        0.2793864886275645,
        0.040082285023685126,
        None,
        0.2793864886275645,
        0.4614979523548118,
        None],
  'y': [0.41934904827458686,
        0.25094422607676786,
        None,
        0.41934904827458686,
        0.21297453457417212,
        None,
        0.21297453457417212,
        0.25094422607676786,
        None,
        0.21297453457417212,
        0.11673219107447323,
        None]},
 {'line': {'color': 'rgb(25,25,25)', 'width': 1},
  'mode': 'lines',
  'type': 'scatter',
  'x': [0.14918615222721016,
        0.040082285023685126,
        None,
        0.14918615222721016,
        0.2793864886275645,
        None,
        0.2793864886275645,
        0.040082285023685126,
        None,
        0.2793864886275645,
        0.4614979523548118,
        None],
  'y': [0.41934904827458686,
        0.25094422607676786,
        None,
        0.41934904827458686,
        0.21297453457417212,
        None,
        0.21297453457417212,
        0.25094422607676786,
        None,
        0.21297453457417212,
        0.11673219107447323,
        None]},
 {'line': {'color': 'rgb(25,25,25)', 'width': 4},
  'mode': 'lines',
  'type': 'scatter',
  'x': [0.14918615222721016,
        0.040082285023685126,
        None,
        0.14918615222721016,
        0.2793864886275645,
        None,
        0.2793864886275645,
        0.040082285023685126,
        None,
        0.2793864886275645,
        0.4614979523548118,
        None],
  'y': [0.41934904827458686,
        0.25094422607676786,
        None,
        0.41934904827458686,
        0.21297453457417212,
        None,
        0.21297453457417212,
        0.25094422607676786,
        None,
        0.21297453457417212,
        0.11673219107447323,
        None]}]

However, when I view the plot, they all look the same width (of 4 I believe). Why is this and how can I resolve it so that each line displays its own weight?

58
Screen Shot 2019-09-18 at 14.18.58.png820×444 11.3 KB

2

@laurie If you look at your edge_list you can notice that each trace in list contains the same edges.
Only the width differ from trace to trace.
Hence when plotly.js renders the first trace your edges have width =1. The second and the third traces overwrite
the first one,
and since the trace3 has its lines of width=4, you are seeing all edges of the same width=4.

To assign to each edge its own width you should redefine the edge_list as follows:

edge_list =  [dict(type='scatter',
                   x=[pos[e[0]][0], pos[e[1]][0], None],
                   y=[pos[e[0]][1], pos[e[1]][1], None],
                   mode='lines',
                   line=dict(width=e[2]['weight']**2, color='rgb(25,25,25)')) for e in graph.edges(data=True)]

In this case you can remove the lines of code that compute the elements of Xe, Ye.

It seems that you have an old model for plotting a Plotly chart. Instead of your dict axis, define:

axis = dict(visible=False)

that has the same effect.

1 Like