Bindings can be added and removed, and the multiplicity of elements-to-triggered-events (i.e. Delegation can be used such that newly added elements trigger bound events. The user can manipulate the viewport with gestures like pinch-to-zoom and drag-to-pan.Įvent binding: Events can be bound in several ways. Stylesheets can be replaced at runtime, changing the overall visual style of the graph.īuilt-in gesture support for mouse and touch based devices: The default Cytoscape.js renderer supports the touch and mouse gestures a user would expect out-of-the-box. node colour mapped from a numerical weight. et al., 2003), a functional mapper syntax is provided to map particular style properties based on element data-e.g. Similar to the Cytoscape desktop app ( Shannon P. Selectors and classes are supported in order to map element state to style. Stylesheets: Stylesheets are used to specify the visual style of elements. Graph theory algorithms: Several well-known graph theory algorithms-such as connectivity search, shortest path, minimum spanning tree, minimum cut, ranking and centrality measures-are included. Graph traversal: Graph traversal functions are provided, which are useful for both user interface interactions and programmatic graph analysis. This enables apps to provide highly interactive graphs for the user. Mutable graphs: The graph can be manipulated by adding, removing, or modifying the state of graph elements. Graph types: Cytoscape.js supports several types of graphs, including traditional graphs, directed graphs, undirected graphs, multigraphs and hypergraphs (with compound nodes, but not yet with hyperedges). 3 Features 3.1 Feature setĬytoscape.js features include, but are not limited to, the following: Some core functions take collections as input.
A collection has its own API that can be used to filter, traverse, perform operations on and get data about the elements in the collection. Each of these functions returns a collection, a set of graph elements. Core functions are available to access graph elements. It represents the graph and is used to run layouts, alter the view, and perform other operations on the graph as a whole. The core is a developer’s main entry point into the library. The Cytoscape.js architecture is composed of the core and the collection. Similarly, graph elements are analogous to HTML DOM elements-they are styled by the stylesheets and programmatically accessible via the JS core API. Styling in Cytoscape.js is specified using CSS-like stylesheets, sharing as much syntax as possible with CSS.
#Cytoscape js examples code#
the browser-and the server-side, an important consideration as JS code is increasingly being shared with the client and the server.Ī GeneMANIA gene–gene interaction network automatically laid out and visualised with Cytoscape.js, showing interaction strength (edge thickness), interaction type (colour), multiple edges between nodes, protein score (node size) defined using a stylesheetįor increased ease of use, the library shares several concepts with the HTML + CSS + JS web model. This allows Cytoscape.js to be run on both the client side-i.e. 1), using HTML5 canvas as its underlying implementation. without a graphical user interface) or as a visualisation component ( Fig. The architecture of Cytoscape.js allows it to be run headlessly (i.e.
#Cytoscape js examples software#
This allows Cytoscape.js to integrate into a wide variety of JS-based software systems. However, it includes hooks to several useful libraries and environments, including CommonJS/Node.js, AMD/Require.js, jQuery, Bower, npm, spm and Meteor. It has no hard dependencies neither browser plugins nor other libraries are required. 2 ImplementationĬytoscape.js is implemented as a standalone JS library. Cytoscape.js is the modern replacement for the Adobe Flash-based Cytoscape Web ( Lopes et al., 2010). Cytoscape.js can be used in several domains, such as biological networks or social graphs.
Cytoscape.js provides a JS application programming interface (API) to enable software developers to integrate graphs into their data models and web user interfaces. Further, the web is increasingly a platform for apps with complex user interfaces that use standard technologies such as HTML, CSS and JavaScript (JS). Network information in biology continues to grow in utility in many contexts, from analysis of cellular mechanisms to identifying disease biomarkers.
0 kommentar(er)
