๐Ÿ“ฃ Announcing Dash Cytoscape

#1

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:

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

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:

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
Building Interactive Collapsible Tree on Dash
Cytoscape integration for Dash
:mega: Announcing Dash D3.js Network Graph
Bug with Dash Cytoscape: mouse events get an offset
#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
pinned #3
#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 https://dash.plot.ly/cytoscape/biopython

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
split this topic #13

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

split this topic #14

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