Skip to main content

A Component Library for Dash aimed at facilitating network visualization in Python, wrapped around Cytoscape.js

Project description

Dash Cytoscape

A Component Library for Dash aimed at facilitating network visualization in Python, wrapped around Cytoscape.js

Interacting with the stylesheet: usage-stylesheet-demo

Interacting with the elements: usage-elements-demo

Getting Started


Make sure that the following python packages are installed:


Older versions are not necessarily incompatible, but have not been extensively tested.


Install the library using pip:

pip install dash-cytoscape

Create the following example inside an file:

import dash
import dash_cytoscape
import dash_html_components as html

app = dash.Dash(__name__)
app.layout = html.Div([
            {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 50, 'y': 50}},
            {'data': {'id': 'two', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}},
            {'data': {'source': 'one', 'target': 'two','label': 'Node 1 to 2'}}
        layout={'name': 'preset'}

if __name__ == '__main__':


Please follow the following steps for local testing:

  1. Clone the repo
$ git clone
  1. In order to run the Python builds (npm run build:py) you need to create a venv for this project. Make sure you have virtualenv correctly installed and run this:
$ mkdir dash_cytoscape_dev
$ cd dash_cytoscape_dev
$ virtualenv venv  # Create a virtual env
$ source venv/bin/activate  # Activate the venv

To activate in windows:

> venv\Scripts\activate

(and then repeat step 3).

  1. Install the JavaScript dependencies and build the code:
$ yarn
$ yarn run build:all
  1. Install the library
$ python install


For using Dash and for a Python-specific overview of Dash Cytoscape, view the Dash User Guide. It's chock-full of examples, pro tips, and guiding principles.

For supplementary information about the underlying javascript API, view the Cytoscape.js documentation.


Package manager

Our preferred package manager for this project is Yarn. Therefore we use yarn.lock rather than package-lock.json. If you decide to start using npm for package management (which will create package-lock.json) and you commit this project to Dokku, make sure to delete yarn.lock.


Dash, Cytoscape.js and Dash Cytoscape are licensed under MIT. Please view LICENSE for more details.

Contact and Support

See for ways to get in touch.


Huge thanks to the Cytoscape Consortium and the Cytoscape.js team for their contribution in making such a complete API for creating interactive networks. This library would not have been possible without their massive work!

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

dash_cytoscape-0.0.4.tar.gz (941.9 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page