Cytoscape.js alternatives and similar libraries
Based on the "Data Visualization" category.
Alternatively, view Cytoscape.js alternatives based on common mentions on social networks and blogs.
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser -
BabylonJS
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. -
p5.js
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs — -
#<Sawyer::Resource:0x00007f1b609038f0>
Open-source JavaScript charting library behind Plotly and Dash -
paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey -
GoJS, a JavaScript Library for HTML Diagrams
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages. -
mxGraph
DISCONTINUED. Diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor. -
processing.js
DISCONTINUED. Processing.js makes your data visualizations work using web standards and without any plug-ins -
jquery.sparkline
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser
Civic Auth - Auth in Less Than 5 Minutes

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Cytoscape.js or a related project?
README
Cytoscape.js
Graph theory (network) library for visualisation and analysis : https://js.cytoscape.org
Description
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.
Example
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.
Documentation
You can find the documentation and downloads on the project website.
Roadmap
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.
Contributing to Cytoscape.js
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](.github/CONTRIBUTING.md).
Feature releases are made monthly, while patch releases are made weekly. This allows for rapid releases of first- and third-party contributions.
Citation
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
Build dependencies
Install node
and npm
. Run npm install
before using npm run
.
Build instructions
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 thebuild
directorydocs
: build the docs intodocumentation
release
: build all release artifactswatch
: automatically build lib for debugging (with sourcemap, no babel, very quick)- good for general testing on
debug/index.html
- served on
http://localhost:8080
or the first available port thereafter, with livereload ondebug/index.html
- good for general testing on
watch:babel
: automatically build lib for debugging (with sourcemap, with babel, a bit slower)- good for testing performance or for testing out of date browsers
- served on
http://localhost:8080
or the first available port thereafter, with livereload ondebug/index.html
watch:umd
: automatically build prod umd bundle (no sourcemap, with babel)- good for testing cytoscape in another project (with a
"cytoscape": "file:./path/to/cytoscape"
reference in your project'spackage.json
) - no http server
- good for testing cytoscape in another project (with a
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 cases
test: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 cases
test:modules
: run unit tests on private, internal APInpm run test:modules -- -g "my test name"
runs modules tests on only the matching test cases
lint
: lint the js sources via eslintbenchmark
: run all benchmarksbenchmark:single
: run benchmarks only for the suite specified inbenchmark/single
Release instructions
- Ensure the docs are updated with the list of releases you would like to make in
documentation/md/intro.md
(on bothmaster
andunstable
branches). Push the changes. - Ensure that milestones exist for the releases that you would like to make. Each milestone should contain its corresponding issues and pull requests.
- For patch releases, do the back-port patch release before the corresponding current release. This ensures that npm lists the current version as the latest one.
git checkout 1.1.x
, e.g. if the previous feature release is 1.1- Follow the remaining ordinary release steps (step 5 and onward).
- Current releases are based on the
master
branch:git checkout master
- If you are making a patch release, you can just release
master
with its new patches. - If you are making a feature release, you need to merge
unstable
ontomaster
. Since there can be conflicts, it's easiest to use the 'ours' strategy which will allow you to use the state ofunstable
as-is (i.e. no conflict resolution necessary):- Make sure your local
master
is up-to-date:git checkout master && git pull
- Make sure your local
unstable
is up-to-date:git checkout unstable && git pull
- Create a merge commit that selects the state of
unstable
and push it:git merge -s ours master && git push
- Fast-forward
master
to the merge commit:git checkout master && git merge unstable && git push
- Update the version number in
package.json
andpackage-lock.json
onunstable
to some provisional new version number, and push it.
- Make sure your local
- If you are making a patch release, you can just release
- Update the
VERSION
environment variable for the release number you want to make, e.g.export VERSION=1.2.3
- Confirm all the tests are passing:
npm run test
- See also
test/index.html
for browser testing (optional)
- Confirm all the tests are passing in IE9 (for feature releases):
npm run watch:umd
- Open an IE9 VM
- Open
http://yourip:8081/test/ie.html
in IE
- Prepare a release:
npm run release
- Review the files that were just built in the previous step.
- There should be a series of updated files in the
dist
directory and thedocumentation
directory, identified withgit status
. - Try out the newly-built docs and demos in your browser.
- There should be a series of updated files in the
- Add the the release to git:
git add . && git commit -m "Build $VERSION"
- Update the package version and tag the release:
npm version $VERSION
- Push the release changes:
git push && git push --tags
- Publish the release to npm:
npm publish
- Create a release for Zenodo from the latest tag. Make sure you wait at least 5 minutes since the last time that you made a release in order for Zenodo to work properly.
- For feature releases: Create a release announcement on the blog. Share the announcement on mailing lists and social media.
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 (npm run test:js
).
*Note that all licence references and agreements mentioned in the Cytoscape.js README section above
are relevant to that project's source code only.