📣 Announcing Dash Cytoscape

Dash Python
1

Update: version 0.2.0 is now out!

Hello Dash Community!

We are announcing today the release of Dash Cytoscape, our new component library for interactive network visualization built on top of Cytoscape.js. It integrates well with Dash, and it is declarative, reactive, Pythonic and callback-ready! Check out those links:

:star2: Medium article release

:computer: Github Repository

:books: Cytoscape User Guide

You can display thousands of edges and nodes with beautiful and customizable styling:
social-network

You can also interactively update the style of your networks using event callbacks:
stylesheet-usage

or even change the underlying network graph data in a callback. In this example, we’re progressively expanding the network graph as we click on nodes:

elements-usage
elements-usage1354×605 619 KB

This work would not have been possible without the great work already done by the Cytoscape Consortium, especially on developing the amazing Cytoscape.js library.

This 7-month work was made possible by the financial support of our commercial partners. If your company or organization would like to sponsor our development directly or through our commercial offerings, please reach out: https://plot.ly/products/consulting-and-oem/

11 Likes
2

If you have any question or comment about this library, feel free to comment here! If you find any bug with the library, or would like to contribute by adding a new feature, please open an issue on our Github repo!

3 Likes
4

This would be great for representing NN’s

1 Like
5

Looks very nice!!, here minding what to do with it…Does the library support showing nodes in 3D?, if not, is it something that could be implemented?

6

This is absolutely fantastic. Love how the Dash developers read exactly what the community has in mind.

I was wondering if there is a way to implement a layout that does hierarchical trees - or the ability to load third party layouts.

7

Looks very nice!!, here minding what to do with it…Does the library support showing nodes in 3D?, if not, is it something that could be implemented?

Thank you, it means a lot!

Both Dash Cytoscape and Cytoscape.js only support 2D visualizations. However, it is currently possible to display 3D networks with plotly graphs, and you are free to wrap your own 3D graph components! Check out the component boilerplate

8

Thanks :smile: We are glad the community is liking it!

It is possible to add external layout, but it requires you to modify the component (located at src/lib/Cytoscape.react.js). The development section of the readme goes over what you need to know to build the project.

Furthermore, the readme of react-cytoscapejs offers an example of adding Cose-bilkent to Cytoscape. It should be pretty straight forward for our react wrapper as well.

1 Like
9

Also check out the examples in Biopython Examples | Dash for Python Documentation | Plotly

image
image1063×724 41.5 KB

1 Like
10

Yay! :tada:
We have built a network visualization tool using Dash Cytoscape, which shows collaboration between editors in wikis, you can have a look here: http://networks.wikichron.science
And this is the repo with its source code: https://github.com/Grasia/WikiChron-networks

2 Likes
11

Thank you @chriddyp !! That is what I was looking for!

12

This is awesome! Thank you!
(Please get that sweet node context menu plugin, it is so aligned with plotly and Dash interactivity:))h

1 Like
13

A post was split to a new topic: Cytoscape - How to filter nodes

14

A post was split to a new topic: Cytoscape - Right click to perform an action

15

Hi, lu. Thanks for your great job. I am curious about its application on 3D. I tried to modify the example at link into 3D graph. Unfortunately, the results seems to be 2D instead of 3D views. Is there other parameters I should change in order to show point in 3D? My code is listed as follows:

import dash_cytoscape as cyto
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape-two-nodes',
        layout={'name': 'preset'},
        style={'width': '100%', 'height': '400px'},
        elements=[
            {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 75, 'y': 75, 'z': 75}},
            {'data': {'id': 'two', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200, 'z': 200}},
            {'data': {'source': 'one', 'target': 'two'}}
        ]
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Thank you in advance! :grinning:

16

Hi @chriddyp and @xhlu. Cytoscape is awesome and glad I can add it to my arsenal for Dash.

Had an issue trying to load the external layouts on Cyto; I am getting the “Error Loading Layout” error on the browser, and the console has the following error:

image
image1393×281 12.2 KB

I used cyto.load_extra_layouts() right before my app.layout and am also on dash-cytoscape==0.1.1. I also found the same issue when trying to run some of the demos, including usage-elements-extra.py. Any idea on what my error might be?

Thanks in advance!

17

A post was split to a new topic: Dash Cytoscape - Labels inside nodes

18

Hi, Is there any way of having trees like this but when you click on a node it goes to another tab rather than opening more arcs?

Thanks

19

Dash Cytoscape is awesome! It solves my problem when building dashboard. I am trying to use cyto.load_extra_layouts() to make my network graph look prettier since the random layout makes the nodes overlapped and edges crossed. My dash cytoscape version is 0.0.5. When I update it to version 0.1.1, it gives error " Could not find a version that satisfies the requirement dash-cytoscape==0.1.1 (from versions: )
No matching distribution found for dash-cytoscape==0.1.1". Any idea on how to fix this? Thanks in advance!

20

Glad you like it! Have you tried uninstalling and reinstalling it? Perhaps, create a new virtualenv and try to only install dash cytoscape?