MSAViewer: interactive JavaScript visualization of multiple sequence alignments.

The MSAViewer is a quick and easy visualization and analysis JavaScript component for Multiple Sequence Alignment data of any size. Core features include interactive navigation through the alignment, application of popular color schemes, sorting, selecting and filtering. The MSAViewer is 'web ready': written entirely in JavaScript, compatible with modern web browsers and does not require any specialized software. The MSAViewer is part of the BioJS collection of components.
AVAILABILITY AND IMPLEMENTATION: The MSAViewer is released as open source software under the Boost Software License 1.0. Documentation, source code and the viewer are available at http://msa.biojs.net/Supplementary information: Supplementary data are available at Bioinformatics online. CONTACT: msa@bio.sh.

1 Introduction

Multiple Sequence Alignment (MSA) is a fundamental procedure to capture similarities between sequences of nucleotides (DNA/RNA) or of amino acids (protein). Biologically meaningful MSAs highlight and capture sites with significant evolutionary conservation. MSAs are essential to predict aspects of protein structure (e.g. secondary structure (Rost, 2001) or protein disorder (Schlessinger )) and function [e.g. binding sites (Ofran ) or localization (Goldberg )]. MSAs can be used to understand genomic rearrangements (Darling ), to derive sequence homology (Altschul ) and to identify evolutionary rates (Pupko ).

MSAs are widely used to display complex annotations relating to structure and function, and to transfer those annotations to sequences that lack annotations (Waterhouse ). Many tools are available to view and analyze MSAs, including standalone applications (Larsson, 2014; Waterhouse ) and web applets (Waterhouse ). With the recent widespread adoption of JavaScript as the leading programming language for interactive web applications, new MSA viewing tools compatible with modern web browsers have been developed and made available (Martin, 2014). BioJS is one particular collection of JavaScript components with growing applications in biology (Corpas ); it is interoperable with many other data visualization tools.

Here, we describe the BioJS MSAViewer. It is readily loaded into web pages to visualize and analyze MSA datasets of arbitrary sizes. MSAViewer implements most features commonly available in other popular MSA viewing software, including scrolling, selecting, highlighting, cross-referencing with protein feature annotations and phylogenetic trees (a detailed comparison of features is in Supplementary Table S1).

2 Visualization

The MSAViewer loads MSA data in FASTA (Pearson, 2000) or CLUSTAL (Larkin ) formats from a user’s local computer or a web server. It then draws two main Canvas panels—the main panel and the overview MSA panel (Fig. 1). The choice to use Canvas over other rendering technologies is discussed in Supplementary Material Section S1.

Fig. 1.

A simplified view of the MSAViewer for the sequence alignment of protein VP24 within seven viruses of Filoviridae family. (A) Sequence logo (Schneider and Stephens, 1990) representation with conservation patterns at each position in the MSA. (B) Bar chart showing amino acid conservation per position. (C) Main MSA panel with residues in the alignment colored according to the Percentage Identity coloring scheme (Waterhouse ). Percentage sequence identities relative to consensus (consensus sequence not shown) are listed for each sequence. Filled red rectangles indicate sequence annotations provided by the user [here: secondary structure predictions of PredictProtein (Yachdav )]. Red frames (indicated by two black arrows) are clusters of residues of ebolavirus VP24 responsible for binding to karyopherin alpha nuclear transporters to suppress antiviral defense mechanism in human (Xu ). (D) A compact overview MSA showing a bird’s eye view of the full alignment. Yellow rectangles are two highlighted clusters in the main MSA panel. Despite the overall sequence homology, the highlighted regions in ebolavirus (EBOV) proteins binding karyoprotein differ from those in Llovu cuevavirus (LLOV) and Lake Victoria marburgvirus (MARV). MARV is known to not suppress host’s antiviral defense mechanism (Xu ). Though no experimental information on binding of LLOV VP24 to karyoproteins is available to date, the comparison of its sequence and structural features suggests a mechanism that is more similar to EBOV than to MARV

Navigation through the alignment is enabled through various controls. First, users can scroll or use the ‘jump to a column’ menu item to navigate to a certain column number. Second, users can pan within the main panel to scroll through the alignment; this has proven to be a useful feature for large alignments. Finally, a second panel—the overview panel (drawn under the main panel)—provides a ‘bird’s eye view’ perspective over the entire alignment and can also be used for navigation.

The alignment is sortable by unique identifiers, sequence labels and sequences. The percentage of gaps and the sequence identity to the consensus sequence, which is calculated from most frequent bases at each position in the alignment, can also be used for sorting. Users can select sequences, columns, or arbitrary regions for analysis, and hide them from the main panel based on their selection, conservation to the consensus sequence or the percentage of gaps. An alignment can also be searched for motifs using a regular expression (e.g. K(K|R)RK for a nuclear localization signal), which are highlighted with a red frame if matched. Sequence position annotations, such as binding sites, are provided by a user and displayed as filled rectangles below the corresponding sequence in the alignment. Users can switch between 15 predefined color schemes. The MSAViewer exports alignments and annotations as ASCII files, and the visual representation as a publication-quality figure.

3 Summary

MSAViewer is a lightweight viewer for MSAs of arbitrary size. Being JavaScript-based, it can be used on any modern web browser without installing any specialized software or add-ons. As part of BioJS, the MSAviewer can interoperate with a growing set of biological data viewers. The phylogenetic tree and the sequence logo viewers are already integrated in the current release. Integration with new MSA visualization techniques, e.g. sequence bundles (Kultys ) is planned. The MSAViewer has already been found useful and became part of Galaxy (Giardine ) https://cpt.tamu.edu/clustalw-msa-and-visualisations and JalView (Waterhouse ) http://www.jalview.org/help/html/features/biojsmsa.html.