ALL Metrics
-
Views
-
Downloads
Get PDF
Get XML
Cite
Export
Track
Software Tool Article

Cytoscape tools for the web age: D3.js and Cytoscape.js exporters

[version 1; peer review: 1 approved, 1 approved with reservations]
PUBLISHED 01 Jul 2014
Author details Author details
OPEN PEER REVIEW
REVIEWER STATUS

This article is included in the Cytoscape gateway.

This article is included in the Bioinformatics gateway.

Abstract

In this paper we present new data export modules for Cytoscape 3 that can generate network files for Cytoscape.js and D3.js. Cytoscape.js exporter is implemented as a core feature of Cytoscape 3, and D3.js exporter is available as a Cytoscape 3 app. These modules enable users to seamlessly export network and table data sets generated in Cytoscape to popular JavaScript library readable formats. In addition, we implemented template web applications for browser-based interactive network visualization that can be used as basis for complex data visualization applications for bioinformatics research. Example web applications created with these tools demonstrate how Cytoscape works in modern data visualization workflows built with traditional desktop tools and emerging web-based technologies. This interactivity enables researchers more flexibility than with static images, thereby greatly improving the quality of insights researchers can gain from them.

Introduction

Cytoscape was born as a GUI-based, Java desktop application in 20031,2. Today, it is a de-facto standard application for biological network analysis and visualization. Around 2005, Java was one of the dominant programming languages for data visualization applications, and Java-based feature-rich toolkits were developed3. However, since they were designed before the re-discovery of Ajax4, developers could not predict the success of JavaScript and related web technologies today. Cytoscape is still an important platform for biological network data integration and analysis, but for data visualization and sharing, we need a new method to take advantage of modern web technologies. Utilizing HTML5 and other emerging web technologies, Cytoscape Consortium developed a JavaScript library for network visualization called cytoscape.js (http://cytoscape.github.io/cytoscape.js/), the successor of Cytoscape Web5, to meet the demand from the Cytoscape user community. Although Cytoscape and Cytoscape.js share some of the core concepts, such as Visual Styles or automatic layouts, they are completely independent software packages and there has been no simple way to use Cytoscape data sets in Cytoscape.js.

Public biological data repositories are still growing rapidly and the demand for visualizing those complex biological data sets is high. Traditionally, analysis and visualization of biological data is done by desktop applications, and in most cases, visualizations created by popular libraries (matplotlib6, ggplot27) are static images. It is hard to perform exploratory data analysis only with static images, especially when visualizing large data sets, because some of the details are lost due to the limited size of printed papers or computer screens. Instead of developing custom visualization toolkits for specific data sets, the scientific data visualization community is heading towards web-based technologies to utilize actively developed visualization toolkits such as mpld3 (http://mpld3.github.io/) or Bokeh (http://bokeh.pydata.org/). D3.js8 is one of the most popular toolkits for creating custom interactive visualizations. If biologists can use the existing powerful desktop application and these emerging web technologies for data visualizations and sharing, it opens up a new way to understand large and complex biological data sets.

To bridge the gap between the desktop version of Cytoscape and other web-based data visualization toolkits, we developed Cytoscape modules to generate web-friendly data formats. The goal is to enable shared visualization of Cytoscape networks via a web platform (e.g., browser), and our strategy is to enable conversion from Cytoscape data objects to a format friendly to web apps, and to provide a template code for creating an interactive web application. In this paper, we present the implementation of Cytoscape data exporters and template web applications and demonstrate how users can publish their data sets as interactive data visualizations with our new tools.

Implementation

The exporter modules were developed for Cytoscape 3. The Cytoscape.js exporter is part of Cytoscape 3 core distribution and is available as a standard feature. The D3.js exporter is an app, and this means developers can write any type of additional JSON exporters as necessary. Exporter modules generate JavaScript Object Notation (JSON) files that are readable by Cytoscape.js and D3.js. To visualize these JSON files as interactive network diagrams, users have to write some JavaScript and HTML5 code to read, map, and render the network and table data in the files. The general structure of code for basic network visualization is common to most use cases. To simplify this visualization task, we implemented template HTML5 projects to render the exported JSON files.

Cytoscape.js exporter

Cytoscape.js is a JavaScript library for interactive network visualization developed by Cytoscape Consortium. Although Cytoscape and Cytoscape.js share core concepts, they have completely independent code bases written in Java and JavaScript. This means there is no binary-level compatibility between these two software packages. The purpose of this exporter is to provide data-level compatibility between these software packages. There are two core functions in this exporter module: network/table converter and Visual Style to CSS converter.

Network/Table to JSON converter

Conversion from Cytoscape networks and tables to Cytoscape.js JSON is done by a serialization module implemented with Jackson, a Java-based JSON parser library (https://github.com/FasterXML/jackson). The converter takes a Cytoscape network object and associated node, edge, and network tables as inputs and converts them into a single JavaScript object represented as JSON. Most of the basic data types are converted into JSON except the following: nested networks, custom graphics, and node shapes and edge line types, which are only available in Cytoscape.

Visual style to CSS

In contrast, converting Cytoscape Visual Style is a nontrivial process. A Visual Style in Cytoscape is a collection of visual mapping functions, which is a mapping from data to visual variables9, and default values. Conversion from default visual property values to JavaScript objects is a simple one-to-one mapping with several non-compatible value filterings. In Cytoscape, there are three types of visual mapping functions. They are Passthrough, Continuous, and Discrete. Cytoscape.js has the concept of a visual mapping function in its design and it follows standards of CSS and selectors, which is significantly different from the design of Cytoscape visual mapping functions. The converter translates Cytoscape visual mapping functions into combinations of Cytoscape.js selectors and mappers (Figure 1). This translation absorbs differences in design between the two applications and reproduces Cytoscape Visual Styles as JavaScript objects used for styling in Cytoscape.js.

3daa0176-4377-44a6-859e-f653e41099f7_figure1.gif

Figure 1. Cytoscape Visual Style to Cytoscape.js Style Object conversion.

D3.js exporter

In general, D3.js does not have any specific data format for visualization. Generic CSV/TSV tables can be used for all types of visualizations, and its core provides data loaders for those files. An exception is the graph data format for force-layout, which is the basic preset for visualizing graph data in D3.js (https://github.com/mbostock/d3/wiki/Force-Layout). It uses an ordinal (i.e., zero-based) index of nodes as the unique identifier, and edges are represented as a pair of those indices. The D3.js exporter converts Cytoscape network topology into this force-layout format, and transforms all associated data tables into properties of nodes and edges in the JSON.

A tree data structure is a special kind of graph, and D3.js has various types of preset visualizations for it, such as radial layout, circle packing or Treemap. Cytoscape can visualize trees as node-link diagrams, and if we can export tree data models stored as Cytoscape graph objects into a D3.js compatible format, users can create multiple views for same data sets using different visualization techniques which could provide new insights for them. To utilize these presets, the exporter generates tree-style JSON for D3.js. The root node of the tree should be specified manually by the user, then the exporter automatically generates tree JSON with all associated tables.

Template projects for visualizing JSON exports

Once exporters generate JSON files, users need actual web applications to visualize the data. Both Cytoscape.js and D3.js are designed for developers, not for end-users, and developers are expected to write their own custom visualization code to see the data. Although they are optimized for custom web-based visualizations, basic components of visualization code, including data loading, mapping, and rendering, are common to most applications. To minimize duplicate efforts to visualize the results from JSON exporters, we developed template web application projects to visualize JSON files generated by Cytoscape. These templates can create basic visualizations of the JSON files out of the box. To develop these templates, we used standard tools for modern JavaScript development: Node.js (http://nodejs.org/) as runtime for all development tools, Yeoman (http://yeoman.io/) for code scaffolding, and Grunt (http://gruntjs.com) as task runner.

Results

A typical data visualization workflow with our new tools consists of the following four steps. First, users load networks, annotations, and experimental data sets into Cytoscape. Second, utilizing core Cytoscape visualization features, users create custom Visual Styles and layouts. Third, all data sets are exported as JSON files, and finally they can create custom web-based, interactive visualizations from the template projects (Figure 2). The original network data visualized in Figure 3 was imported with a Cytoscape app called KEG-GScape (http://apps.cytoscape.org/apps/keggscape). The advantage of this workflow is that users can use the large collection of existing Cytoscape apps for data integration and analysis, and the result can be exported as interactive web-based visualizations with the new exporters. Figure 3 shows the TCA Cycle pathway which was generated from a KEGG XML (KGML) file, and its Visual Style was automatically generated from the graphics data in the file. Cytoscape.js exporter can generate web-compatible style and network files directly from the Cytoscape view. Our template code for Cytoscape.js is a simple viewer, and it can be used as a basis for complex data visualization application.

3daa0176-4377-44a6-859e-f653e41099f7_figure2.gif

Figure 2. Basic workflow for publishing Cytoscape-generated networks as interactive web visualizations.

The combination of Cytoscape 3 and new JSON exporters can be used as data integration tool for web-based visualizations. Our sample Grunt project generates a simple template code for visualizing D3.js and Cytoscape.js JSON files.

3daa0176-4377-44a6-859e-f653e41099f7_figure3.gif

Figure 3. Sample view of exported JSON file visualized by the template code using Cytoscape.js.

Original network data was imported to Cytoscape 3 using the KEGGScape app. The template code contains minimal set of features like simple table browser and network viewer. The table browser (bottom) is implemented with AngularJS (https://angularjs.org) and Bootstrap (http://getbootstrap.com).

The exporters create JSON files with both network topology and data tables, and users can create complex data visualizations which cannot be achieved with Cytoscape alone. Figure 4 and Figure 5 shows simple network visualizations created with D3.js force-directed layout (Figure 4) and tree layout (Figure 5). These figures are created with a minimal set of features available in D3.js and they can be used as a “boilerplate” code for custom visualizations. The desktop version of Cytoscape is optimized for rendering node-link, or ball-stick network diagrams, which is only one way to visualize graph data. Cytoscape 3 supports multiple-rendering engines and if developers can implement new rendering engines for new visualizations, such as Treemap or Chord Diagram, they can add new visualizations on Cytoscape. This is not a trivial task and as an alternative, our D3.js templates can be used to make prototypes for new visualizations.

3daa0176-4377-44a6-859e-f653e41099f7_figure4.gif

Figure 4. Visualization of a sample network (galFiltered.sif) by D3.js force-layout.

3daa0176-4377-44a6-859e-f653e41099f7_figure5.gif

Figure 5. Tree version of Gene Ontology visualized by D3.js tree layout.

Conclusions

In this paper, we presented a new workflow to visualize biological data sets using Cytoscape and modern web-based data visualization libraries. The example visualizations show how users can leverage easy-to-use Cytoscape core features as a part of web-based interactive data visualization publishing workflow.

Future plan

At this point, new features discussed in this paper are designed for developers who can write JavaScript and HTML5 code. End users are also a part of our target audience, and so we will implement the “Export as HTML5 Session” feature as a core Cytoscape feature, which creates a compressed archive file that includes all of the networks, tables, and Visual Styles as JSON along with all JavaScript files to visualize the data as a single-page application.

Software availability

Software available from: http://apps.cytoscape.org/apps/d3jsexporter

Latest source code: https://github.com/keiono/cytoscape-d3

Source code as at the time of publication: https://github.com/F1000Research/cytoscape-d3/releases/tag/V1.0

Archived source code as at the time of publication: http://dx.doi.org/10.5281/zenodo.1054710

License MIT License

Template code generator website https://github.com/cytoscape/cyjs-sample

High-resolution images and interactive examples are available at our web sites above.

Comments on this article Comments (0)

Version 2
VERSION 2 PUBLISHED 01 Jul 2014
Comment
Author details Author details
Competing interests
Grant information
Copyright
Download
 
Export To
metrics
Views Downloads
F1000Research - -
PubMed Central
Data from PMC are received and updated monthly.
- -
Citations
CITE
how to cite this article
Ono K, Demchak B and Ideker T. Cytoscape tools for the web age: D3.js and Cytoscape.js exporters [version 1; peer review: 1 approved, 1 approved with reservations]. F1000Research 2014, 3:143 (https://doi.org/10.12688/f1000research.4510.1)
NOTE: If applicable, it is important to ensure the information in square brackets after the title is included in all citations of this article.
track
receive updates on this article
Track an article to receive email alerts on any updates to this article.

Open Peer Review

Current Reviewer Status: ?
Key to Reviewer Statuses VIEW
ApprovedThe paper is scientifically sound in its current form and only minor, if any, improvements are suggested
Approved with reservations A number of small changes, sometimes more significant revisions are required to address specific details and improve the papers academic merit.
Not approvedFundamental flaws in the paper seriously undermine the findings and conclusions
Version 1
VERSION 1
PUBLISHED 01 Jul 2014
Views
25
Cite
Reviewer Report 11 Sep 2014
Jose Villaveces, Research Group Computational Biology, Max Planck Institute of Biochemistry, Munich, Germany 
Approved
VIEWS 25
The article describes Cytoscape.js and D3.js exporters and a code template generator. Additionally, it provides all the essential information about Cytoscape.js exporter and D3.js exporters and points interested users to the source code for its implementation.

Even though there are a ... Continue reading
CITE
CITE
HOW TO CITE THIS REPORT
Villaveces J. Reviewer Report For: Cytoscape tools for the web age: D3.js and Cytoscape.js exporters [version 1; peer review: 1 approved, 1 approved with reservations]. F1000Research 2014, 3:143 (https://doi.org/10.5256/f1000research.4824.r6061)
NOTE: it is important to ensure the information in square brackets after the title is included in all citations of this article.
Views
43
Cite
Reviewer Report 01 Aug 2014
Alexander Lex, Visual Computing Group, Harvard University, Cambridge, MA, USA 
Approved with Reservations
VIEWS 43
The article describes an important new development for the Cytoscape project: bridging the gap between complex yet powerful desktop applications to easy-to-use, installation free web application focused on the analysis and presentation. I consider this workflow as an important bridge ... Continue reading
CITE
CITE
HOW TO CITE THIS REPORT
Lex A. Reviewer Report For: Cytoscape tools for the web age: D3.js and Cytoscape.js exporters [version 1; peer review: 1 approved, 1 approved with reservations]. F1000Research 2014, 3:143 (https://doi.org/10.5256/f1000research.4824.r5313)
NOTE: it is important to ensure the information in square brackets after the title is included in all citations of this article.
  • Author Response 06 Aug 2014
    Keiichiro Ono, Department of Medicine, University of California, San Diego, La Jolla, CA 92093-0688, USA
    06 Aug 2014
    Author Response
    I completely agree with your point about the missing details for web based KEGG visualization part.  I will add more details how to reproduce the visualization with this tool.  It ... Continue reading
  • Author Response 25 Nov 2014
    Keiichiro Ono, Department of Medicine, University of California, San Diego, La Jolla, CA 92093-0688, USA
    25 Nov 2014
    Author Response
    Dear Dr. Lex,

    This version 2 includes all updates for your comments for the original version.  Also, recently we released new version of Cytoscape (3.2.0), and it should be compatible with this ... Continue reading
COMMENTS ON THIS REPORT
  • Author Response 06 Aug 2014
    Keiichiro Ono, Department of Medicine, University of California, San Diego, La Jolla, CA 92093-0688, USA
    06 Aug 2014
    Author Response
    I completely agree with your point about the missing details for web based KEGG visualization part.  I will add more details how to reproduce the visualization with this tool.  It ... Continue reading
  • Author Response 25 Nov 2014
    Keiichiro Ono, Department of Medicine, University of California, San Diego, La Jolla, CA 92093-0688, USA
    25 Nov 2014
    Author Response
    Dear Dr. Lex,

    This version 2 includes all updates for your comments for the original version.  Also, recently we released new version of Cytoscape (3.2.0), and it should be compatible with this ... Continue reading

Comments on this article Comments (0)

Version 2
VERSION 2 PUBLISHED 01 Jul 2014
Comment
Alongside their report, reviewers assign a status to the article:
Approved - the paper is scientifically sound in its current form and only minor, if any, improvements are suggested
Approved with reservations - A number of small changes, sometimes more significant revisions are required to address specific details and improve the papers academic merit.
Not approved - fundamental flaws in the paper seriously undermine the findings and conclusions
Sign In
If you've forgotten your password, please enter your email address below and we'll send you instructions on how to reset your password.

The email address should be the one you originally registered with F1000.

Email address not valid, please try again

You registered with F1000 via Google, so we cannot reset your password.

To sign in, please click here.

If you still need help with your Google account password, please click here.

You registered with F1000 via Facebook, so we cannot reset your password.

To sign in, please click here.

If you still need help with your Facebook account password, please click here.

Code not correct, please try again
Email us for further assistance.
Server error, please try again.