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

Documentation

You can find the documentation on the project website. This readme is mostly for developers of Cytoscape.js.

Acknowledgements

Arbor was used in one of Cytoscape.js's 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.

Adding source files

When adding source (.js) files to the repository, there are several files that should be updated accordingly:

• Makefile : Include the file in the build process so that the concatenated and minified files generated for distribution include the new file.

• src/debug/index.html : Update the <script> tag list with the file so that the debug page can continue to be used to visually test the library.

• tests/index.html : Update the list of JavaScript files that the testing framework considers to consistute the library. Otherwise, the tests will almost certainly fail.

Build dependencies

You need a number of executables installed on your system to successfully run make to build the project.

Their paths are defined in Makefile, so you can revise the paths to these executables and still run make successfully. You should be able to run make without modification on any well configured Unix-like machine, such as Linux or Mac OS X---Mac needs XCode with command line tools installed to run make.

Build instructions

Run make in the console. The targets are:

• all : build everything (default)
• minify : build the production minified JS
• zip : minify and make a ZIP file for release
• clean : deletes built files

A note to developers:

For zip, make sure to define VERSION in Makefile if you're making an actual release ZIP.

Tests

QUnit tests are found in the tests directory. The tests are automatically run against different versions of jQuery.

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