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

Graph theory (a.k.a. network) library for analysis and visualisation : http://js.cytoscape.org

Test status

: master

: unstable

Documentation

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

Contributing to Cytoscape.js

Please refer to CONTRIBUTING.md.

Build dependencies

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

Build instructions

Run gulp <target> in the console. The main targets are:

Building:

• build (default) : build the library
• clean : clean the build directory
• watch : automatically build lib and tests for debugging
• zip : build the release ZIP
• dist : update the distribution JS for npm, bower, etc.

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
• sniper : runs a BioJS sniper server that hosts demos

Documentation:

• docs : build the documentation template
• 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. Make sure the docs are updated with the list of releases in documentation/md/intro.md
2. Update the VERSION environment variable, e.g. export VERSION=1.2.3
3. Confirm JS files pass linting: gulp lint
4. Confirm all tests passing: gulp test
5. Test the docs and demos with the latest code: gulp docspub
6. 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 or mocha).