25. Cytoscape.js and Cytoscape¶
25.1. What is Cytoscape.js?¶
A network visualized with Cytoscape 3.1.0
Same network exported to Cytoscape.js (Rendered with Google Chrome and Cytoscape.js 2.0.3)
25.2. Data Exchange between Cytoscape and Cytoscape.js¶
Export Network and Table to Cytoscape.js¶
Cytoscape.js stores network data (graph) and its data table in the same object. Cytoscape writes such data complex as JSON, i.e., both network and data tables will be exported as a single JSON file. You can select a network and export it from File → Export → Network to File… and select Cytoscape.js JSON (*.cyjs) as the file type.
Cytoscape only supports one of the Cytoscape.js supported JSON formats, which is:
SUID will be used as unique identifier for nodes and edges in the JSON. For more information about this format, please visit Cytoscape.js web site.
Important Note about Data Compatibility¶
Original Data Table Column Names:
Gene Name KEGG.pathway
The Names above will be replaced to:
25.3. Export Styles to Cytoscape.js¶
Cytoscape and Cytoscape.js are sharing a concept called Style. This is a collection of mappings from data point to network property. oCytoscape can export its Styles into CSS-based Cytoscape.js JSON.
You can export all styles into one JSON file from File → Export → Styles to File… and select Style for cytoscape.js (*.json) as its format.
Cytoscape.js does not support all of Cytoscape Network Properties. Those properties will be ignored or simplified when you export to JSON Style file.
Currently, the following Visual Properties will not be exported to Cytoscape.js JSON:
Custom Graphics and its positions
Node Label Width
Node Border Line Type
Arrow Colors (they are always same as edge color)
Cytoscape.js and Cytoscape Compatibility¶
Cytoscape’s network rendering system is designed for desktop use, while the browser-based renderer incorporates web technologies (e.g., cytoscape.js and Cascading Style Sheets). As a result, most but not all networks will render the same in the browser as in Cytoscape. Cytoscape visual styles not supported in the web browser are ignored. A complete compatibility list is available here.
Import Cytoscape.js data into Cytoscape¶
Cytoscape.js network JSON files can be loaded from standard Cytoscape file menu: File → Import → Network …. Both File and URL are supported.
25.4. Build Your Own Web Application with Cytoscape.js¶
If you have questions and comments about web application development with Cytoscape and Cytoscape.js, please send yours to our mailing list.