cytoscape
Advanced tools
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.
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());
});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 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 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.
Created at the University of Toronto and published in Oxford Bioinformatics (2016, 2023).
Authored by: Max Franz, Christian Lopes, Dylan Fong, Mike Kucera, ..., Gary Bader
Graph theory (network) library for visualisation and analysis : https://js.cytoscape.org
Cytoscape.js is a fully featured graph theory library. Do you need to model and/or visualise relational data, like biological data or social networks? If so, Cytoscape.js is just what you need.
Cytoscape.js contains a graph theory model and an optional renderer to display interactive graphs. This library was designed to make it as easy as possible for programmers and scientists to use graph theory in their apps, whether it's for server-side analysis in a Node.js app or for a rich user interface.
You can get started with Cytoscape.js with one line:
var cy = cytoscape({ elements: myElements, container: myDiv });
Learn more about the features of Cytoscape.js by reading its documentation.
The Tokyo railway stations network can be visualised with Cytoscape:
A live demo and source code are available for the Tokyo railway stations graph. More demos are available in the documentation.
You can find the documentation and downloads on the project website.
Future versions of Cytoscape.js are planned in the milestones of the Github issue tracker. You can use the milestones to see what's currently planned for future releases.
Would you like to become a Cytoscape.js contributor? You can contribute in technical roles (e.g. features, testing) or non-technical roles (e.g. documentation, outreach), depending on your interests. Get in touch with us by posting a GitHub discussion.
For the mechanics of contributing a pull request, refer to CONTRIBUTING.md.
Feature releases are made monthly, while patch releases are made weekly. This allows for rapid releases of first- and third-party contributions.
To cite Cytoscape.js in a paper, please cite the Oxford Bioinformatics issue:
Cytoscape.js: a graph theory library for visualisation and analysis
Franz M, Lopes CT, Huck G, Dong Y, Sumer O, Bader GD
Bioinformatics (2016) 32 (2): 309-311 first published online September 28, 2015 doi:10.1093/bioinformatics/btv557 (PDF)
Install node and npm. Run npm install before using npm run.
Run npm run <target> in the console. The main targets are:
Building:
build: do all builds of the library (umd, min, umd, esm)build:min : do the unminified build with bundled dependencies (for simple html pages, good for novices)build:umd : do the umd (cjs/amd/globals) buildbuild:esm : do the esm (ES 2015 modules) buildclean : clean the build directorydocs : build the docs into documentationrelease : build all release artifactswatch : automatically build lib for debugging (with sourcemap, no babel, very quick)
debug/index.htmlhttp://localhost:8080 or the first available port thereafter, with livereload on debug/index.htmlwatch:babel : automatically build lib for debugging (with sourcemap, with babel, a bit slower)
http://localhost:8080 or the first available port thereafter, with livereload on debug/index.htmlwatch:umd : automatically build prod umd bundle (no sourcemap, with babel)
"cytoscape": "file:./path/to/cytoscape" reference in your project's package.json)dist : update the distribution js for npm etc.Testing:
The default test scripts run directly against the source code. Tests can alternatively be run on a built bundle. The library can be built on node>=6, but the library's bundle can be tested on node>=0.10.
test : run all testing & lintingtest:js : run the mocha tests on the public API of the lib (directly on source files)
npm run test:js -- -g "my test name" runs tests on only the matching test casestest:build : run the mocha tests on the public API of the lib (on a built bundle)
npm run build should be run beforehand on a recent version of nodenpm run test:build -- -g "my test name" runs build tests on only the matching test casestest:modules : run unit tests on private, internal API
npm run test:modules -- -g "my test name" runs modules tests on only the matching test caseslint : lint the js sources via eslintbenchmark : run all benchmarksbenchmark:single : run benchmarks only for the suite specified in benchmark/singlemaster and unstable branches. PRs can go on either branch, with the patch applied to the other branch after merging.
Mocha tests are found in the test directory. The tests can be run in the browser or they can be run via Node.js (npm run test:js).
FAQs
Graph theory (a.k.a. network) library for analysis and visualisation
We found that cytoscape demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.