html templates


A High-performance and Cross-platform Library for
visualizing and publishing
large-scale biomedical research data

It is increasingly imperative to realize efficient visualization for disseminating biomedical data from research community to the rising community-sourced platforms. Various web tools have been emerging to assist researchers in visualizing biomedical data sets. Nevertheless, general applications are enduring the insufficiency of high-performance computation for large-scale complex data and cross-platform scalability towards the publishing media. It is therefore desirable to produce a robust approach for efficiently visualizing and sharing the extensive research data.

We developed VisShare, a high-performance and cross-platform visualization library, to address the two challenges. VisShare incorporates two key components: a high-performance engine (HPE), and a full-featured API. The framework of VisShare (Fig. 1a) depicts the workflow of creating and sharing visualizations between users and communities. Based on VisShare, visualizations of large and heterogeneous biomedical data can be easily disseminated to inclusive publishing platforms through integrating VisShare into web and native apps, furthermore accompanied by interactive user experience.


1. HPE

The HPE is high performance and cross-platform accelerator for visualizing and representing large and heterogeneous biomedical data sets. HPE is based on the OpenGL technology and provides implementation in both the Web and Native mobile application platforms (technical framework detailed in Supplementary Note 1). Specifically, Web-HPE employs WebGL, a GPU-accelerated JavaScript API, to optimize the rendering performances other than SVG technique that common visualization libraries like D3.js use. Web-HPE performs a remarkable efficiency at leveraging GPU to expedite batch operations for simultaneous and sophisticated rendering tasks concerning homogenous glyph generations, dynamic property modifications, and clustered object transformations. Web-HPE highlights the fulfillment of the interactivity not natively supported by WebGL. Considering the difficulty, we implemented an agile event-handling-rendering mechanism, which allows users to interact with presented plots through the click, mouseover, drag, and zooming operations.

Native-HPE utilizes OpenGL ES to manage mobile GPU for complicated rendering tasks which considerably increases the graphics rendering performances of visualizations embedded in mobile apps. Additionally, the novelty of Native-HPE is the development of an Object-C library to transform biomedical metadata into graphical glyphs, paths, and advanced visual layouts. To decrease the demands for researchers that requires specialized knowledge of native programming to elaborate the visualization, Native-HPE encapsulated the React Native into the framework to accomplish the communication between JSON-formatted configuration file and the Object-C library. Native-HPE developed the event-handling-rendering method comparable to Web-HPE for recognizing the interactions like touch, press along with multiple gestures in native apps and next coordinating the perceived manipulations with the dynamic rendering displays.

2. full-featured API

VisShare provides full-featured, unified, and user friendly development APIs to the HPE accelerator, enabling users to efficiently develop and deploy Web and iOS visualization applications. The features of APIs permit Web as well as Native mobile APP developers to easily generate a high-performance visualization by creating a configuration file in JSON format. Importantly, as Fig. 1a underlined, users are capable of concurrently building applications for Web and Mobile with the one unified JSON file, which diminishes enormous burdens of duplicating intricate implementations for the alternative platform. This advance extends the accessibility to biologists, designers, and oncologists of the hands-on engagement in customizing cross-platform visualizations of their own data sets.
In principle, VisShare presents a wide range of visual models serving as the layout of visualization which vary from primary glyphs, to standard linear charts (boxplot, candlestick, tree map, area graph, and co-occurrence matrix) to circular plots (chords, scatter, heatmap, highlight, histogram, line, and stack) for representing biomedical data. A composite circular plot can consist of specific tracks regarding different data columns (illustrated in Fig. 1a).
Additionally, it is feasible to customize the visual encodings for metadata, for instance, color, size, radius, label, stroke, opacity, etc. using the precise parameters embodied in the API. A highlighted functionality of API enables the callback handlers to bind versatile interaction events with visual elements, which empowers viewers to manipulate individual ideograms as well as the complete canvas fluently. This improvement, for bioinformaticians, accordingly enhances the efficiency of analyzing commonalities and divergences beyond the interactive visualizations.

Technical Workflow of VisShare

3. Case

We demonstrated VisShare with visualizing an integrated genomic dataset with 74,604 metadata which represents different features referring to Karyotype, CG, CHG, CHH methylation level, repeat density, lncRNA density, and linkage of fusion transcripts of the maize genome[6]. We applied VisShare to generate cross-platform visualizations regarding the dataset and the underlying goal of data analysis. The circular plot shown in Fig. 1b comprises representative genetic visual models including chromosome arrangement, heat maps, scatter, and chords for visualizing the corresponding data to depict the genome-wide patterns and correlations. VisShare simultaneously renders 18,586 ideograms and tremendous associated metadata reflecting with view's interactions. The plot allows users to zoom in/out or drag the scalable canvas and hover on any ideogram for an explicit tip in the web browser and manipulate gestures for comparable correspondences in the native mobile app.

To invalidate the high performances promoted by VisShare, we have conducted a comparative study using a published mRNA-seq dataset [7]. We compared the performance of Web VisShare with canvas-based Chart.js library and the SVG-based D3.js library (Supplementary Note2). Besides, the comparison considering rendering performance between Native VisShare and iOS native controls is yielded out (Supplementary Note3).

Web VisShare:

Mobile VisShare:

Github Repo:

VisShare - Web Cases


VisShare is a high-performance and cross-platform library supporting generating and sharing visualizations of large-scale biomedical data effortlessly. The superior utility brings great values to diverse stakeholders from research and publishing community towards knowledge sharing. This paper presents an online collection of biomedical plots visualized by VisShare for Web and iOS platforms. Readers are inspired to investigate the high performances and flexible interactivity via intuitive experiences. We released VisShare (1.0) to the GitHub repository as an open-sourced library for crowd-sourcing developments.

© Copyright 2018 Suta Inc. - All Rights Reserved