cytoscape

What is cytoscape?

Cytoscape is a graph theory library for visualizing and analyzing networks. It provides a comprehensive set of features for creating, manipulating, and rendering graphs, making it suitable for a wide range of applications from bioinformatics to social network analysis.

What are cytoscape's main functionalities?

Graph Creation

This feature allows you to create a graph with nodes and edges. The code sample demonstrates how to initialize a Cytoscape instance, add elements (nodes and edges), and apply styles and layouts.

const cytoscape = require('cytoscape');
const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'ab', source: 'a', target: 'b' } }
  ],
  style: [
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc'
      }
    }
  ],
  layout: {
    name: 'grid',
    rows: 1
  }
});

Graph Manipulation

This feature allows you to dynamically add and remove elements from the graph. The code sample shows how to add a new node and edge, and how to remove an existing node.

cy.add({ group: 'nodes', data: { id: 'c' } });
cy.add({ group: 'edges', data: { id: 'bc', source: 'b', target: 'c' } });
cy.remove(cy.$('#a'));

Graph Layouts

This feature provides various layout algorithms to arrange the graph elements. The code sample demonstrates how to apply a circular layout to the graph.

cy.layout({ name: 'circle' }).run();

Graph Styling

This feature allows you to style the graph elements. The code sample shows how to change the background color of all nodes to blue.

cy.style().selector('node').style({ 'background-color': 'blue' }).update();

Event Handling

This feature enables event handling for graph elements. The code sample demonstrates how to log a message when a node is tapped.

cy.on('tap', 'node', function(evt){
  var node = evt.target;
  console.log('Tapped ' + node.id());
});

Other packages similar to cytoscape

d3

D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It uses HTML, SVG, and CSS. While D3 is more general-purpose and flexible, Cytoscape is specialized for graph theory and network visualization.

vis-network

vis-network is a library to visualize dynamic, interactive networks. It is part of the vis.js suite. Compared to Cytoscape, vis-network is simpler and more lightweight but may lack some of the advanced features and customizability of Cytoscape.

sigma

Sigma is a JavaScript library dedicated to graph drawing. It is designed to display interactive static graphs. Sigma is more focused on performance and rendering large graphs, whereas Cytoscape offers a broader range of features for graph analysis and manipulation.

README

Cytoscape.js

Test status

Master :

Unstable :

Documentation

You can find the documentation and downloads on the project website.

If you're looking to get an old version of the library, you can build off the associated tag or you can browse the list of old builds. We very strongly recommend you use the latest version. If you run into a bug on the latest version, report it on the issue tracker. We'll try to fix the bug as soon as possible, and we'll give you a snapshot build that includes the fix for you to use until the next official bugfix release.

Contributing to Cytoscape.js

Cytoscape.js is an open source project, and anyone interested is encouraged to contribute to Cytoscape.js. We gladly accept pull requests. If you are interested in regular contributions to Cytoscape.js, then we can arrange granting you permission to the repository by [contacting us](mailto:[e-mail]?subject=Granting permission to Cytoscape.js repository).

If your pull request is a bugfix, please make changes to the master branch. Otherwise, please make changes to the next version's branch (i.e. unstable).

Authors

The list of all code contributions to Cytoscape.js can be found in the Contributors section on GitHub.

Acknowledgements

CoSE is a layout in Cytoscape.js. It's one of the best force-directed layouts in Cytoscape.js in its own right, and it's excellent at arranging compound graphs. CoSE was implemented by Gerardo Huck and based on an article, "A layout algorithm for undirected compound graphs".

Cola.js is a layout in Cytoscape.js, and it is one of the best force-directed layouts in Cytoscape.js. Cola.js is the work of Tim Dwyer at the Monash Adaptive Visualisation Lab.

Dagre is a layout in Cytoscape.js, and it's an excellent way to arrange trees and DAGs. Dagre is the work of Chris Pettitt.

Arbor is used in one of Cytoscape.js' included layouts. We made some modifications to the library, written by Samizdat Drafting Co., so that it would work with multiple instances of Cytoscape.js and that it would work on lesser browsers, like IE. Information about this library can be found at the Arbor website and on GitHub where the original code was forked.

Springy.js is a layout in Cytoscape.js. Springy.js is the work of Dennis Hotson.

Note: Cytoscape.js does not include any of these libraries directly but allows use of them as layouts if they are included in your app.

Adding source files

When adding source (.js) files to the repository, update the list of JS files in gulpfile.js. You can update the references to these JS files in the tests and debug page et cetera with gulp:

1. gulp debugrefs : Update the JS files referenced in the debug page (debug/index.html).
2. gulp testrefs : Update the JS files referenced in the test page (test/index.html).
3. gulp testlist : Update the JS test files referenced in the test page (test/index.html).

Or you can do them together via gulp refs.

Build dependencies

Install npm and gulp. Of course, npm install before using gulp.

Build instructions

Run gulp in the console. The main targets are:

Building:

• build : build the library
• zip : build the release ZIP
• clean : clean the build directory
• dist : update the distribution JS for npm, bower, etc.

File references:

• refs : update all refs
• testrefs : update JS lib file refs in the tests page
• testlist : update list of test JS files in tests page
• debugrefs : update JS lib file refs in debug page

Testing:

• test : run the Mocha unit tests
• lint : lint the JS sources via jshint
• benchmark : run benchmark regression tests
• benchmark-single : run benchmarks only for the suite specified in benchmark/single
• watch : update JS refs in HTML files (debug page, test page) automatically when JS files are added or deleted

Documentation:

• docs : build the documentation template
• docsdemoshots : get snapshots of demos referenced in the docs (requires PhantomJS, e.g. brew update && brew install phantomjs)
• sniper : runs a BioJS sniper server that hosts demos
• docsmin : build the documentation template with all resources minified
• docspub : build the documentation for publishing (ZIPs, JS refs, etc.)
• docspush : push the built documentation to js.cytoscape.org
• unstabledocspush : push the built documentation to js.cytoscape.org/unstable

Release instructions

1. Update the VERSION environment variable, e.g. export VERSION=1.2.3
2. Confirm VERSION is picked up by gulp: gulp version
3. Confirm JS files pass linting: gulp lint
4. Confirm all tests passing: gulp test
5. Build and publish the release: gulp publish

Tests

Mocha tests are found in the test directory. The tests can be run in the browser or they can be run via Node.js (gulp test).

Funding

Funding for Cytoscape.js and Cytoscape is provided by NRNB (U.S. National Institutes of Health, National Center for Research Resources grant numbers P41 RR031228 and GM103504) and by NIH grants 2R01GM070743 and 1U41HG006623. The following organizations help develop Cytoscape:

ISB | UCSD | MSKCC | Pasteur | Agilent | UCSF | Unilever | Toronto | NCIBI | NRNB