Which is Better Graph Visualization Libraries?
cytoscape vs vis-network vs jsplumb
1 Year
cytoscape vis-network jsplumb
What's Graph Visualization Libraries?

Graph visualization libraries are essential tools in web development for creating interactive and dynamic representations of data structures such as networks, graphs, and relationships. These libraries enable developers to visualize complex data in a more understandable format, facilitating better insights and decision-making. Each library offers unique features and capabilities tailored to different use cases, from simple diagrams to complex network analysis, making them invaluable for applications in fields like social network analysis, bioinformatics, and data science.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
cytoscape 824,646 10,062 4.63 MB 17 2 months ago MIT
vis-network 115,061 3,034 46.7 MB 325 a year ago (Apache-2.0 OR MIT)
jsplumb 26,677 7,737 - 0 3 years ago (MIT OR GPL-2.0)
Feature Comparison: cytoscape vs vis-network vs jsplumb

Complexity Handling

  • cytoscape : Cytoscape excels in handling complex graphs with thousands of nodes and edges. It provides advanced features for graph analysis, including filtering, aggregating, and manipulating large datasets, making it suitable for intricate visualizations in research and data science.
  • vis-network : vis-network strikes a balance, capable of handling moderately complex graphs while remaining user-friendly. It supports dynamic data updates and real-time manipulation, making it versatile for various applications.
  • jsplumb : jsPlumb is designed for simpler use cases, focusing on connecting UI elements rather than complex graph structures. It allows for straightforward visual connections, making it less suitable for large datasets but excellent for UI-driven applications.

Interactivity

  • cytoscape : Cytoscape offers extensive interactivity options, including zooming, panning, and customizable tooltips. Users can interact with nodes and edges, triggering events and updates, which is crucial for data exploration and analysis.
  • vis-network : vis-network provides a rich set of interactive features, including drag-and-drop capabilities, zooming, and selection. It allows users to manipulate the graph dynamically, enhancing user engagement and data exploration.
  • jsplumb : jsPlumb provides drag-and-drop functionality for connecting elements, allowing users to create interactive diagrams easily. However, its interactivity is limited to connection management rather than data-driven interactions.

Customization

  • cytoscape : Cytoscape offers extensive customization options for styling nodes and edges, including colors, shapes, and sizes. Its flexibility allows developers to create visually appealing and informative graphs tailored to specific needs.
  • vis-network : vis-network provides a good level of customization for nodes and edges, allowing developers to define styles, shapes, and colors easily. It strikes a balance between customization and usability.
  • jsplumb : jsPlumb allows for basic customization of connection styles and endpoints, but it is less flexible compared to the other libraries. It is primarily focused on functionality rather than extensive visual customization.

Performance

  • cytoscape : Cytoscape is optimized for performance with large datasets, utilizing WebGL for rendering complex graphs efficiently. It can handle thousands of nodes and edges without significant performance degradation, making it suitable for heavy data analysis.
  • vis-network : vis-network is designed to handle moderate performance demands, using canvas rendering for better performance with larger datasets. It balances performance with usability, making it suitable for real-time applications.
  • jsplumb : jsPlumb performs well for smaller diagrams and UI connections but may struggle with performance when handling a large number of connections or elements due to its DOM manipulation approach.

Use Cases

  • cytoscape : Cytoscape is ideal for applications in bioinformatics, social network analysis, and any domain requiring complex network visualization and analysis. Its advanced features cater to researchers and data scientists needing detailed insights.
  • vis-network : vis-network is versatile for various applications, including social networks, organizational charts, and real-time data visualization. It is user-friendly and suitable for developers looking for a balance between complexity and ease of use.
  • jsplumb : jsPlumb is best suited for creating interactive user interfaces, flowcharts, and diagrams where visual connections between elements are essential. It is commonly used in dashboard applications and UI design.
How to Choose: cytoscape vs vis-network vs jsplumb
  • cytoscape : Choose Cytoscape if you need a powerful library for complex graph analysis and visualization, especially for biological data or large networks. It offers extensive layout algorithms and a rich set of features for interactivity and styling.
  • vis-network : Opt for vis-network if you require a library that balances ease of use with powerful visualization capabilities. It is well-suited for creating network diagrams and allows for easy manipulation of nodes and edges, making it ideal for real-time data visualization.
  • jsplumb : Select jsPlumb if you're looking for a straightforward way to create interactive, draggable connections between elements in a web application. It's particularly useful for building flowcharts, diagrams, and UI connections without the overhead of complex graph structures.
README for cytoscape

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

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.

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

Bioinformatics (2016) 32 (2): 309-311 first published online September 28, 2015 doi:10.1093/bioinformatics/btv557 (PDF)

  • PubMed abstract for the original 2016 article
  • PubMed abstract for the 2023 update article
  • 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) build
  • build:esm : do the esm (ES 2015 modules) build
  • clean : clean the build directory
  • docs : build the docs into documentation
  • release : build all release artifacts
  • watch : 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 on debug/index.html
  • 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 on debug/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's package.json)
  • no http server
  • 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 & linting
  • test: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 node
  • npm run test:build -- -g "my test name" runs build tests on only the matching test cases
  • test:modules : run unit tests on private, internal API
  • npm run test:modules -- -g "my test name" runs modules tests on only the matching test cases
  • lint : lint the js sources via eslint
  • benchmark : run all benchmarks
  • benchmark:single : run benchmarks only for the suite specified in benchmark/single
  • Release instructions

    Background

  • Ensure that a milestone exists for the release you want to make, with all the issues for that release assigned in the milestone.
  • Bug fixes should be applied to both the master and unstable branches. PRs can go on either branch, with the patch applied to the other branch after merging.
  • When a patch release is made concurrently with a feature release, the patch release should be made first. Wait 5 minutes after the patch release completes before starting the feature release -- otherwise Zenodo doesn't pick up releases properly.
  • Patch version

  • Go to Actions > Feature release
  • Go to the 'Run workflow' dropdown
  • [Optional] The 'master' branch should be preselected for you
  • Press the green 'Run workflow' button
  • Close the milestone for the release
  • Feature version

  • Go to Actions > Feature release
  • Go to the 'Run workflow' dropdown
  • [Optional] The 'unstable' branch should be preselected for you
  • Press the green 'Run workflow' button
  • Close the milestone for the release
  • Make the release announcement on the blog
  • Notes on GitHub Actions UI