Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Is plotly able to integrate with Networkx graph?

I have a vehicle routing (VRP) model output currently visulized using networkx. In addition, I want to further add the networkx graph on a real world map. it it possible to use plotly to add the map layer to the original networkx graph?

the full code are here:

@jerry2021

Yes, you can plot networks on Mapbox. Here is an example that is likely be posted twice, because I suppose I answered a similar question some time ago:

import networkx as nx
import plotly.graph_objs as go

G = nx.read_gpickle('divvy.pkl')  #https://github.com/empet/Datasets/blob/master/divvy.pkl
G_new = G.copy()
for n1, n2, d in G.edges(data=True):
    #print(d['count'])
    if d['count'] < 400:
        G_new.remove_edge(n1, n2)

#Extract data to define the `scattermapbox` trace for graph nodes:

node_data = list(G_new.nodes(data=True))
ids = [nl[0] for nl in node_data]
lats = [nl[1]['latitude'] for  nl in node_data]
lons = [nl[1]['longitude'] for  nl in node_data]
     
dpcapacity = [nl[1]['dpcapacity'] for  nl in node_data]
tooltips = [f"{nl[1]['name']}<br>dpcapacity: {nl[1]['dpcapacity']}" for nl in node_data]  

#Define the dict for the graph layout (i.e. node geographic locations):
pos = {id: [lo, la]  for id, lo, la in zip(ids, lons, lats)}

#Get the map center:
x_center = (min(lons) + max(lons))/2
y_center = (min(lats) + max(lats))/2

fig= go.Figure(go.Scattermapbox(  #trace for nodes
             lat= lats,
             lon=lons,
             mode='markers',
             text=tooltips,
             marker=dict(size=8, 
                         color= dpcapacity, 
                         colorscale='matter'
                        ),
             showlegend=False,
             hoverinfo='text'
            ))            

edge_list = list(G_new.edges(data=True))
pl_edges = [(item[0], item[1]) for item in edge_list]

#Define the coordinates of the edge ends as `'MultiLineString'` data type, see https://en.wikipedia.org/wiki/GeoJSON

coords=[]
for e in pl_edges:
    coords.append([ [pos[e[0]][0], pos[e[0]][1]],  [pos[e[1]][0], pos[e[1]][1]] ])  

#mapbox_access_token = 'my_token'

#Define the Mapbox layers representing the graph edges:

layers = [dict(sourcetype = 'geojson',
               source={"type": "Feature",
                       "geometry": {"type": "MultiLineString",
                                    "coordinates": coords}
                      },
             color= 'red',
             type = 'line',   
             line=dict(width=1.5),
            )]
#mapboxt = open(".mapbox_token").read().rstrip() #my mapbox_access_token  must be set only for special mapbox style
fig.update_layout(title_text="Graph on map", title_x=0.5,
              font=dict(family='Balto', color='black'),
              autosize=False,
              width=850,
              height=1200,
              hovermode='closest',
    
              mapbox=dict(#accesstoken=mapbox_access_token,
                          layers=layers,
                          bearing=0,
                          center=dict(lat=y_center,
                                      lon=x_center+0.01),
                          pitch=0,
                          zoom=11.5,
                          style='open-street-map'
                         ),
            margin=dict(t=150)
            )

The above nework is not very interesting, but from this example you can learn how are defined its edges as mapbox layers.

If you are interested in edges following geographical paths, then you must install osmnx: https://github.com/gboeing/osmnx . In this plot https://chart-studio.plotly.com/~empet/15041 the red and blue path are plotted following the (lon, lat) provided by osmnx.
See also: https://chart-studio.plotly.com/~empet/15000.