bioWeb3D: an online webGL 3D data visualisation tool
© Pettit and Marioni; licensee BioMed Central Ltd. 2013
Received: 1 March 2013
Accepted: 29 May 2013
Published: 7 June 2013
Data visualization is critical for interpreting biological data. However, in practice it can prove to be a bottleneck for non trained researchers; this is especially true for three dimensional (3D) data representation. Whilst existing software can provide all necessary functionalities to represent and manipulate biological 3D datasets, very few are easily accessible (browser based), cross platform and accessible to non-expert users.
Using basic 3D representation techniques in a technologically innovative context, we provide a program that is not intended to compete with professional 3D representation software, but that instead enables a quick and intuitive representation of reasonably large 3D datasets.
Visualisation is a key challenge in the analysis of large biological datasets, especially when analysing organized structures with distinct sub-clusters . This is particularly important when analysing 3-Dimensional (3D) datasets. When a biological process or feature has been described spatially by a set of 3D referenced points, either via laboratory work (confocal microscopy for example) or generated within a simulation, with some data attached to each point in space, the first step in interpreting the data is to visualise it. Once the data are visualised and their quality assessed, downstream analysis can proceed. For example, a typical second step is to cluster the observations into different classes based upon the information associated with each point; those results will also need visualisation.
While various 3D visualisation tools have been developed, they have typically been made available via a locally installed piece of software such as BioLayout Express 3D, Arena3D , 3D Genome Tuner , Amira 3D , V3D , the Allen Brain Atlas  or Cytoscape . These tools are very complete and usually complex to operate for non-expert users. Moreover, they require installation on every machine they are used on, which makes sharing inconvenient. To address this issue, some 3D visualisation tools have been built online and are accessible through the browser directly, such as AstexViewer , which is utilised by the Protein Databank Europe via a Java Applet. More recently, visualisation tools developed using HTML5/WebGL capabilities have been described, although they have focused on very specific applications, such as analysing radiology data .
bioWeb3D allows the user to represent any 3D dataset on their browser by defining only two files. The two files can either be formatted as JSON or XML files, two widely used structured formats on the web [11, 12], or directly as Comma Separated Values files (CSV).
The first file used by the application, referred to as the “dataset file”, contains the coordinates of every point in the dataset. The second type of file used, the “information layer” file, describes one or several information layers that are associated with the points defined in the first file. For example, if each point defines the location of a cell within a tissue, the second file could describe whether a particular gene is expressed in each cell. That way the tissue expression profile can be represented in the spatial context of the tissue.
Although the focus is on making bioWeb3D simple and easy to use, some options are available to customise how datasets are represented. The application can be used to visualise sequential information, such as 3D protein structures, in which case a solid line can be drawn between the points. In other situations, such as when a population of cells is considered, the points are viewed as individual particles. The information layers are visualised by colouring the 3D points according to the class that each point belongs to.
The 3D data are rendered using simple 2D quadrilaterals positioned in the 3D space according to their coordinates. This simple technique has been selected to keep bioWeb3D as light-weight as possible whilst ensuring good quality visualisation performance and fluidity.
Defining the input file formats
JSON is the recommended format to input files into bioWeb3D because of its rigorous structure and its fast object generation, which is directly built into all of the primary internet browsers’ interpreter. Compared to other data-interchange languages, such as XML, JSON is also easily human readable thanks to a light-weight syntax. However, some applications might output data only in an XML format and not JSON, as the latter is generally more web oriented. For this reason bioWeb3D can also accept XML as an input format.
Furthermore, much data generated in the biological sciences is stored within CSV files. Converting CSV documents to the JSON or XML format is not always trivial. In order to facilitate this process, the application is also able to directly render simple CSV files that follow a certain format as an input.
Dataset file specification
When the user adds a new Dataset file, a new Dataset section is created in the “Data” panel of the application. Each dataset file contains one dataset.
The datasetfile should have a root object called “dataset” which contains:
The “name” property of the dataset (e.g., “my dataset”);
The “chain” parameter, which should be set to true if the points are connected (the default value is false) - the data will be considered sequentially, with each point connected by a solid line to the previous and next point according to its order in the dataset file;
The “points” property, which is a two dimensional array representing a list of (x,y,z) vectors that define the co-ordinates of the points.
Listing 1 is an example of a minimal 3 points dataset file.
The dataset XML format used is very similar to the previously defined JSON format. The file must have a root object called “<dataset>” which contains:
The “<name>” property of the dataset (e.g., “my dataset”);
The “<chain>” parameter, which should be set to true if the points are linked (the default value is false) - the data will be considered sequentially, with each point connected by a solid line to the previous and next point according to its order in the dataset file;
The “<points>” property, which contains all the single “<point>” elements that define the dataset. Each “<point>” has three properties to define its spatial location, namely “<x>”, “<y>” and “<z>”.
Listing 2 contains the same minimal dataset as Listing 1 but formatted in XML.
Each line represents a point and the three coordinates on each line must be separated by “comma” characters.
As an example, Listing 3 carries the same information as the JSON file in Listing 1. We note that although the spatial information remains the same it is not possible to set a name or to connect the points within a CSV file input.
Information layer file specification
The Information layer file contains information about the points described in the Dataset file. The information in this file has to be given in the same order as the points defined in the Dataset file.
The information layerfiles must have a root element named “information”. Since one information file can define multiple information sets, the structure below “information” is a list. Each element of the list is structured as follows:
The “name” property (optional);
The “numClass” property, which indicates the number of different classes the data will be assigned to;
The “labels” property, which defines a list of names for the “numClass” classes previously defined (optional);
The “values” property, which defines the class of each point in the dataset. As points do not have single IDs, this property must be in the same order and have the same length as the points defined in the dataset file.
For example coming back to the 3 points defined in Listing 1, two information layers could correspond to:
one clustering algorithm that puts the first two points together in class one and the third point alone in a second class
a second clustering algorithm that puts each point in a separate class
In this case the Information layer file would look like Listing 4.
The information layer XML format used is very similar to the previously defined JSON format. The information layerfiles must have a root element named “<information>”. Since one information file can define multiple information sets, the structure below “<information>” is a list of “<set>” elements. Each “<set>” element is structured as follows:
The “<name>” property (optional);
The “<numClass>” property, which indicates the number of different classes the data will be assigned to;
The “<labels>” property, which contains as many individual “<label>” properties as the number of different classes. Each “<label>” defines the names for one class (optional);
The “<values>” property, which contains all the single “<value>” properties, each one defining the class of each point in the dataset. As points do not have single IDs, the “<value>” properties must be in the same order and have the same length as the points defined in the dataset file.
Listing 5 carries the exact same information as Listing 4.
Each column represents the class to which a point belongs. The separation character between columns must be a “comma”. Listing 6 carries the same information as Listing 4. Note that it is not possible to use the “labels” or “name” properties available in Listing 4 within a CSV information layer file.
Results and discussion
bioWeb3D can be used to visualise datasets derived from a wide variety of biological assays. Examples are shown on the Github wiki , where we display a 3D representation of a Principal Component Analysis (PCA) carried out with R and the 3D structure of a protein extracted from the PDBe database.
More generally, the user can interact with the visualisation via an interface on the right of the screen, which contains three panels. In the “dataset” panel, the user can choose the datasets and information layer files that should be represented in each world. This panel also allows the user to show/hide specific classes of the selected information layers. Each dataset file entered will create a new sub-panel where the user can input information layer files for that world. Selecting an information layer in the drop-down list will display the data in the current world and generate a list of classes that the user can modify regarding their visibility and colour. The “View” panel enables the user to choose which of the worlds are shown on the screen, ranging from 1 to 4. Finally, the “Settings” panel provides the user with a number of options that affect all worlds and all datasets, such as modifying the axes scales, modifiying the transparency and size of raw data points and information layer coloured points. The user can also choose to enable centering of the data around 0 or leave the coordinates as inputted.
bioWeb3D and local software
Many 3D visualisation software tools, most of which require local installation, exist and provide similar functionalities with standard 3D format input such as Wavefront.OBJ. Some are extremely generic and powerful like Blender or Amira 3D. However, these tools are not typically oriented towards a scientific audience. Moreover, those that are more focused on science are often targeted towards a very specific application, especially in the medical sciences . In this context, we believe that bioWeb3D can be useful as it is completely generic and browser based. It should also be noted that recent browser improvements regarding GPU acceleration through the WebGL paradigm allow bioWeb3D to visualise several hundred thousand points. Additionally, local software is usually platform specific, which is not the case for browser based applications.
bioWeb3D and java applets
As mentioned previously, browser based 3D visualisation tools currently exist mainly in the form of Java Applets. This technology has attracted much criticism in 2012 regarding security flaws, leading the “United States Computer Emergency Readiness Team” to advise that all Java Applets should be disabled due to current and future Java vulnerabilities . The development of WebGL technology is viewed by many as a candidate for replacing Applets.
The main current limitation of a WebGL based application is the machine and browser compatibility. Only computers with fairly recent graphic cards will be able to run a 3D environment. It should also be noted that Microsoft has notified the developer community that Internet Explorer is not scheduled to support WebGL in the near future. However, importantly, Chrome, Firefox, Safari and Opera all now support WebGL applications. Moreover, we note that WebGL is also supported on mobile platforms such as iOS or Android .
Open source and collaborative development
As a fully open source software, the source code for bioWeb3D is available on Github , a web platform that allows interested parties to collaborate on the development of the project. In the wiki page “Contribute to bioWeb3D”, directions to alter or add capabilities to bioWeb3D are provided for users who wish to get involved.
bioWeb3D is designed to be a simple and quick way to view 3D data with a specific focus on biological applications. Being browser-based, the software can be easily used from any computer without the need to install a piece of software. Importantly, bioWeb3D has been designed to offer a very straightforward and easy-to-use working environment. Despite current limitations in terms of compatibility or rendering performance for large numbers of points, we believe that bioWeb3D will enable non-experts in 3D data representation to quickly visualise their data and the information attached to it in many biological contexts, thus facilitating downstream analyses.
Availability and requirements
The full source code is available on the Github page of the project . A live version of the software is online . You will require a graphical card and a browser with WebGL capabilities to run bioWeb3D.
Project name: bioWeb3D
Project home page: http://www.ebi.ac.uk/~jbpettit/bioWeb3D
Operating system: Platform independent
Other requirements: Browser and graphic card with WebGL capabilities
License: Academic Free License ("AFL") v. 3.0
The authors would like to acknowledge Samuel Croset, Stijn van Dongen, Konrad Rudolph and Sergio Martinez Cuesta for helpful discussion and criticisms. We also thank Raju Tomer and Detlev Arendt for providing the Platynereis data displayed in Figure 1. Funding for this study was provided by the European Molecular Biology Laboratory (EMBL).
- Luengo Hendriks CL, Rubel O: Integrating data clustering and visualization for the analysis of 3D gene expression data. IEEE/ACM Trans Comput Biol Bioinform. 2010, 7: 64-79.View ArticlePubMedGoogle Scholar
- Freeman TC: Construction, visualisation, and clustering of transcription networks from Microarray expression data. PLoS Comput Biol. 2007, 3 (10): e206-10.1371/journal.pcbi.0030206.PubMed CentralView ArticleGoogle Scholar
- Schneider R, Pavlopoulos GA: Arena3D: visualization of biological networks in 3D. BMC Syst Biol. 2008, 2: 104-10.1186/1752-0509-2-104.PubMed CentralView ArticlePubMedGoogle Scholar
- Wang Q: 3D Genome tuner: compare multiple circular genomes in a 3D context. Genomics Proteomics Bioinformatics. 2009, 7 (3): 143-146. 10.1016/S1672-0229(08)60043-1.View ArticlePubMedGoogle Scholar
- Stalling D: Amira: a highly interactive system for visual data analysis. The Visualization Handbook, chapter 38. Edited by: Charles D. Hansen and Chris R. Johnson, Charles D. Hansen and Chris R. Johnson . 2005, Elsevier, 749-767.View ArticleGoogle Scholar
- Peng H: V3D enables real-time 3D visualization and quantitative analysis of large-scale biological image data sets. Nature Biotechnol. 2010, 28 (4): 348-353. 10.1038/nbt.1612. [http://www.pubmedcentral.nih.gov/articlerender.fcgi?artid=2857929&tool=pmcentrez&rendertype=abstract]View ArticleGoogle Scholar
- Boguski MS, Crook BE, Eichele G, Lein ES, et al: Genome-wide atlas of gene expression in the adult mouse brain. Nature. 2007, 445 (7124): 168-176. 10.1038/nature05453.View ArticlePubMedGoogle Scholar
- Shannon P: Cytoscape: a software environment for integrated models of biomolecular interaction networks. Genome Res. 2003, 13: 2498-2504. 10.1101/gr.1239303.PubMed CentralView ArticlePubMedGoogle Scholar
- Hartshorn MJ: Astex Viewer: a visualisation aid for structure-based drug design. J Comput Aided Mol Des. 2002, 16 (12): 871-881. 10.1023/A:1023813504011.View ArticlePubMedGoogle Scholar
- Kulkarni DB: Article: NetraRIS - a web based DICOM viewer. Int J Comput Appl. 2012, 48 (24): 40-44. [Published by Foundation of Computer Science, New York, USA]Google Scholar
- Wilde E: Putting things to REST. Transport. 2007, 15 (November): 567-583.Google Scholar
- XML applications and initiatives. [http://xml.coverpages.org/xmlApplications.html]
- WebGL 1.0 Specification. [https://www.khronos.org/registry/webgl/specs/1.0/]
- Tomer R: Profiling by image registration reveals common origin of annelid mushroom bodies and vertebrate pallium. Cell. 2010, 142 (5): 800-809. 10.1016/j.cell.2010.07.043.View ArticlePubMedGoogle Scholar
- bioWeb3D on github. [http://github.com/jbogp/bioWeb3D]
- United States Computer Emergency Readiness Team. [http://www.kb.cert.org/vuls/id/636312]
- Compatibility table for WebGL. [http://caniuse.com/webgl]
- bioWeb3D online. [http://www.ebi.ac.uk/~jbpettit/bioWeb3D/]
This article is published under license to BioMed Central Ltd. This is an Open Access article distributed under the terms of the Creative Commons Attribution License (http://creativecommons.org/licenses/by/2.0), which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.