想出国的钥匙扣
1 月前 |
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.
cytoscape is a powerful graph theory library for visualizing and analyzing complex networks and graphs in web applications. It provides a rich set of features for creating interactive and customizable graph visualizations, making it a popular choice for applications that require sophisticated data representation. While cytoscape is a robust option for graph visualization, there are several alternatives worth considering:
d3-graphviz
is a great choice for creating dynamic and interactive graph visualizations.
vis-network
is specifically focused on network visualization and allows for the creation of interactive graphs with features like drag-and-drop, zooming, and customizable node and edge styles. If you are looking for a library that is easy to use and offers a range of interactive features for network visualization,
vis-network
is an excellent alternative.
To see how cytoscape compares with d3-graphviz and vis-network, check out the comparison: Comparing cytoscape vs d3-graphviz vs vis-network .
vis-network
is a dynamic, browser-based visualization library for creating interactive network graphs. It allows developers to easily visualize complex relationships between data points, making it an excellent choice for applications that require network analysis or data representation. With features like smooth animations, customizable nodes and edges, and support for large datasets,
vis-network
is well-suited for building interactive visualizations in web applications.
One notable alternative to
vis-network
is
react-graph-vis
. This library is a React wrapper for the
vis-network
library, enabling developers to integrate network visualizations seamlessly into their React applications.
react-graph-vis
provides a set of React components that simplify the process of creating and managing network graphs, making it easier to work with React's component lifecycle and state management. If you are already using React and want to leverage the capabilities of
vis-network
,
react-graph-vis
is a great choice as it combines the power of
vis-network
with the convenience of React.
For a detailed comparison between these two libraries, check out the following link: Comparing react-graph-vis vs vis-network .
jsplumb is a popular JavaScript library that enables developers to create interactive and visually appealing connections between elements on a web page. It is particularly useful for building flowcharts, diagrams, and other visual representations of relationships and processes. With jsPlumb, you can easily create draggable elements and connect them with customizable lines, making it a powerful tool for applications that require visual interaction.
While jsPlumb is a robust solution for creating connections and diagrams, there are several alternatives in the JavaScript ecosystem that offer similar functionalities. Here are a few noteworthy options:
cytoscape is a graph theory library that provides a powerful framework for visualizing and analyzing complex networks. It is highly customizable and supports a wide range of graph layouts and styles. Cytoscape is particularly well-suited for applications that require advanced graph visualization capabilities, such as social network analysis, biological data visualization, and other complex data representations. Its extensive features make it a great choice for developers looking to create intricate and interactive network visualizations.
vis-network is part of the Vis.js library, which provides a set of tools for visualizing data in various formats. The vis-network module specifically focuses on creating network graphs and allows for dynamic and interactive visualizations. It offers features such as smooth animations, customizable nodes and edges, and support for large datasets. If you are looking for a library that is easy to use and provides a straightforward way to visualize networks, vis-network is a solid option.
To see how jsPlumb compares with Cytoscape and vis-network, check out the comparison: Comparing cytoscape vs jsplumb vs vis-network .
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.
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