Dash Cytoscape

Released on February 5th, 2019**

Dash Cytoscape is a graph visualization component for creating easily
customizable, high-performance, interactive, and web-based networks. It
extends and renders Cytoscape.js, and
offers deep integration with Dash layouts and callbacks, enabling the
creation of powerful networks in conjunction with the rich collection of
Dash components, as well as established computational biology and network
science libraries such as Biopython and networkX.

– xhlulu and the Dash Team

Quickstart

    pip install dash-cytoscape==0.2.0
    
    import dash
    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}},
                {'data': {'id': 'two', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}},
                {'data': {'source': 'one', 'target': 'two'}}
            ]
        )
    ])
    
    if __name__ == '__main__':
        app.run_server(debug=True)
    

    Dash Cytoscape graphs are interactive! Scroll to zoom and drag on
    the canvas to move the entire graph around. You can move nodes by
    dragging it, or by clicking, holding, and moving your mouse
    to the desired location (and click again to release).

    This also work in mobile! Tap-and-hold on a node to move it, or on
    the canvas to move the entire graph. Pinch your fingers outwards to
    zoom in, or pinch them together to zoom out.

Dash Cytoscape User Guide

  • Basic Usage & Elements
  • Overview of element declaration and manipulation.

  • Layouts
  • Description of built-in layouts, and how to modify their properties.

  • Styling
  • Methods to style elements with a CSS-like syntax.

  • Callbacks
  • Methods to combine Dash callbacks to update your Cytoscape object.

  • User Interactions
  • Overview of user-interaction events that trigger callbacks in Dash,
    and how to use them to update the Cytoscape component.

  • Biopython Examples
  • Examples of applications in bioinformatics using Biopython.

  • Exporting Images
  • This example shows how to export your Cytoscape graphs as images (jpg, png, svg).

  • Making responsive graphs
  • This example shows how to build a responsive Cytoscape graph.

  • Reference
  • Comprehensive list of all of the Cytoscape properties.