Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Is that possible to use plotly Cytoscape and show the data points on a map?

As the title, I am working on a network analysis project and have used the Cytoscape to present the different city data. Then I realize that the background is pale. Let us just simply use example from Plotly’s tutorial (Here):
import dash
import dash_cytoscape as cyto
import dash_html_components as html

app = dash.Dash(name)

nodes = [
** {**
** ‘data’: {‘id’: short, ‘label’: label},**
** ‘position’: {‘x’: 20 * lat, ‘y’: -20 * long}**
** }**
** for short, label, long, lat in (**
** (‘la’, ‘Los Angeles’, 34.03, -118.25),**
** (‘nyc’, ‘New York’, 40.71, -74),**
** (‘to’, ‘Toronto’, 43.65, -79.38),**
** (‘mtl’, ‘Montreal’, 45.50, -73.57),**
** (‘van’, ‘Vancouver’, 49.28, -123.12),**
** (‘chi’, ‘Chicago’, 41.88, -87.63),**
** (‘bos’, ‘Boston’, 42.36, -71.06),**
** (‘hou’, ‘Houston’, 29.76, -95.37)**
** )**
]

edges = [
** {‘data’: {‘source’: source, ‘target’: target}}**
** for source, target in (**
** (‘van’, ‘la’),**
** (‘la’, ‘chi’),**
** (‘hou’, ‘chi’),**
** (‘to’, ‘mtl’),**
** (‘mtl’, ‘bos’),**
** (‘nyc’, ‘bos’),**
** (‘to’, ‘hou’),**
** (‘to’, ‘nyc’),**
** (‘la’, ‘nyc’),**
** (‘nyc’, ‘bos’)**
** )**
]

default_stylesheet = [
** {**
** ‘selector’: ‘node’,**
** ‘style’: {**
** ‘background-color’: ‘#BFD7B5’,**
** ‘label’: ‘data(label)’**
** }**
** },**
** {**
** ‘selector’: ‘edge’,**
** ‘style’: {**
** ‘line-color’: ‘#A3C4BC’**
** }**
** }**
]

app.layout = html.Div([
** cyto.Cytoscape(**
** id=‘cytoscape-events’,**
** layout={‘name’: ‘preset’},**
** elements=edges + nodes,**
** stylesheet=default_stylesheet,**
** style={‘width’: ‘100%’, ‘height’: ‘450px’}**
** )**
])

if name == ‘main’:
** app.run_server(debug=True)**
Is that possible to show the data on the actual map?

thanks

Answer my own question, after one day searching, it turns out that Plotly cannot do this, the best way is Networkx & Basemap

1 Like