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