https://orcid.org/0000-0003-4735-4212
Abstract
We present a bioinformatics and systems biology visualization toolkit harmonizing real time interactive exploring and analyzing of big data, full-fledged customizing of look-n-feel and producing multi-panel publication-ready figures in PDF format simultaneously.
Source code and detailed user guides are available at http://canvasxpress.org, https://baohongz.github.io/canvasDesigner and https://baohongz.github.io/canvasDesigner/demo_video.html.
Supplementary data are available at Bioinformatics online.
1 Introduction
CanvasXpress was initially developed as the core visualization component for bioinformatics and systems biology analysis at Bristol-Myers Squibb. It was further enhanced by scientists around the world and served as a key visualization engine for many popular bioinformatics tools and analyses (Ankenbrand, et al., 2016; Davenport, et al., 2017; Dower, et al., 2017; TrinotateWeb, https://goo.gl/8BpVZ4; Zhao, et al., 2016; Zhao, et al., 2017). It offers a rich set of interactive plots to display scientific and genomics data, such as oncoprint of cancer mutations, heatmap, 3D scatter, violin, pathway, treemap, volcano and many other types of plots.
Recently, the reproducibility and usability of the package in real world bioinformatics and clinical use cases have been improved significantly, which is witnessed by continuous add-on features and wide adoption of the toolkit in the scientific communities. Emphasizing reproducibility, canvasXpress captures all programmatic and user interactions, which includes modifications done through the menus, on plot controls and the comprehensive configurator as illustrated at https://goo.gl/q3mFxe. The customization is recorded and saved into a JSON file in real time as the user is modifying a graph. The file can then be opened in a webpage containing a canvasXpress panel to reproduce the exact plot. Please see a step-by-step example at https://goo.gl/xoErzW.
Like those high-end commercial tools, CanvasXpress also includes a standalone unobtrusive data table and a filtering widget to allow data exploration and filtering. Data can be dynamically sorted, segregated, transposed, transformed, clustered and grouped by multiple levels. The mouse events as well as the zooming, panning and drag-n-drop capabilities are fully customizable features that make this library capable of further expansion of functionalities.
2 Materials and methods
CanvasXpress is a standalone JavaScript library that works in all modern browsers on mobile, tablets and desktop devices. The following example shows its basic usage. The JavaScript, the styling CSS and input data are described in the <head> section. A <canvas> element is embedded into the <body> section. When the web page, https://goo.gl/1tAhta is loaded, the callback function initPage will trigger the plotting.
<html>
<head>
<link rel=“stylesheet” href=“https://canvasxpress.org/css/canvasXpress.css” type=“text/css”/>
<script type=“text/javascript” src=“https://canvasxpress.org/js/canvasXpress.min.js”></script>
<script>
var initPage = function () {
var data = {“y”: {“vars”: [“Gene1”],
“smps”: [“Smp1”, “Smp2”, “Smp3”],
“data”: [[10, 35, 88]]
} };
var conf = {“graphType”: “Bar”};
var cX = new CanvasXpress(“canvasId”, data, conf);
}
</script>
</head>
<body onload=“initPage();”>
<canvas id=“canvasId” width=“540” height=“540”></canvas>
</body></html>
An advanced example with more data points and further customization is available at https://goo.gl/XMGBHB.
CanvasXpress can be now simply used within R at the console to generate conventional plots, in R-Studio, or seamlessly embedded in Shiny web applications. A list of examples of the canvasXpress R library including the mouse events, zooming and broadcasting capabilities are included under the shiny directory in the github package (https://goo.gl/PDcAEN). This R library was created with the htmlwidgets package (http://www.htmlwidgets.org).
Facilitated by canvasDesigner, the web-based graphics layout tool written in JavaScript, the end user can easily arrange any number of different types of plots in SVG format that can be exported by canvasXpress and other tools as illustrated in Supplementary pages 3 and 5. Each individual plot could be freely positioned and adjusted in size by controls added to each plot. At last, printing as PDF can generate a high-resolution multi-panel plot as shown in Figure 1, which is a standard option on all modern Internet browsers. In addition, the composed plot could be saved as HTML to be embedded into web based reports for sharing. This design tool relieves scientists from hours if not days of struggle of using multiple tools, sometime even programming in R or other scripting languages in order to get job done.
Versatile plots generated by canvasXpress and arranged by canvasDesigner. (A) Oncoprint of cancer mutations; (B) Gene expression heatmap with comprehensive annotations; (C) 3D scatter plot; (D) Violin plot; (E) Pathway with gene expression bar plots; (F) Profile plot of gene expression
3 Summary
CanvasDesigner toolkit is the first open source package with unprecedented interactive functionalities that are even not seen in expensive commercial tools. It empowers biologists who do not possess advanced computer skills to perform analysis and generate high-quality publication-ready figures easily.
Conflict of Interest: none declared.
References
