LogoJS: a Javascript package for creating sequence logos and embedding them in web applications

Abstract

Summary

Sequence logos were introduced nearly 30 years ago as a human-readable format for representing consensus sequences, and they remain widely used. As new experimental and computational techniques have developed, logos have been extended: extra symbols represent covalent modifications to nucleotides, logos with multiple letters at each position illustrate models with multi-nucleotide features and symbols extending below the x-axis may represent a binding energy penalty for a residue or a negative weight output from a neural network. Web-based visualization tools for genomic data are increasingly taking advantage of modern web technology to offer dynamic, interactive figures to users, but support for sequence logos remains limited. Here, we present LogoJS, a Javascript package for rendering customizable, interactive, vector-graphic sequence logos and embedding them in web applications. LogoJS supports all the aforementioned logo extensions and is bundled with a companion web application for creating and sharing logos.

Availability and implementation

LogoJS is implemented both in plain Javascript and ReactJS, a popular user-interface framework. The web application is hosted at logojs.wenglab.org. All major browsers and operating systems are supported. The package and application are open-source; code is available at GitHub.

Contact

zhiping.weng@umassmed.edu

Supplementary information

Supplementary data are available at Bioinformatics online.

1 Introduction

Sequence logos have been a popular format for representing biological sequence patterns since their introduction nearly 30 years ago (Schneider and Stephens, 1990). Symbols are scaled in height by their frequencies at each position in the sequence, and each position’s total height may further be scaled by the position’s information content to visually emphasize significant positions. As new assays and computational techniques have emerged, various sequence logo extensions have been introduced, including new symbols for covalent modifications, such as cytosine methylation (Ngo et al., 2019; Viner et al., 2016; Zuo et al., 2017), multi-letter symbols to represent multi-nucleotide features from transcription factor binding models (Kulakovskiy et al., 2018; Rube et al., 2018), and negative letter heights to represent nucleotide depletion (Dey et al., 2018; Thomsen and Nielsen, 2012), residue binding energy penalties (Foat et al., 2006), and negative weights from deep-learned models of transcription factor binding (Greenside et al., 2018).

Web-based tools for generating sequence logos include WebLogo (Crooks et al., 2004) and Seq2Logo (Thomsen and Nielsen, 2012), and offline tools include seqLogo (Bembom, 2014), RWebLogo and ggseqlogo (Wagih, 2017). These tools support a range of features, but to our knowledge, none can generate the full range of logo types described above. Additionally, they generate static logo images, which are difficult to annotate or make interactive after the fact within a web application.

Publicly available genomic data are expanding at an accelerating pace. Visualization techniques are increasingly utilizing Javascript-based tools, which are highly interactive and allow users to explore results from a variety of assays in real-time (Down et al., 2011; Durand et al., 2016; Kerpedjiev et al., 2018; Thorvaldsdóttir et al., 2013; Vanderkam et al., 2016). Support for sequence logos within this paradigm remains limited, however, and prominent motif databases predominantly render static image logos without support for dynamic or interactive features (Khan et al., 2018; Kulakovskiy et al., 2018). Existing Javascript packages for rendering logos are generally far more limited in scope than the aforementioned web-based and offline tools, with little to no support for extended features, such as custom alphabets and dinucleotide features (Larsen; Lichtenberg; Maguire et al.). We designed LogoJS to fill this void.

2 Implementation

LogoJS is an open-source Javascript package for creating embeddable, publication-ready sequence logos in scalable vector-graphic format (Supplementary Fig. S1, left). Examples of the package’s flexibility are presented in Figure 1.

Fig. 1.

Functionalities of LogoJS. (A–H) Example logos rendered with LogoJS. (A) DNA logo. (B) Protein logo. (C) Methylated DNA logo. (D) Logo with negative letters. (E and F) Dinucleotide and trinucleotide logos. (G) Annotated logo highlighting a SNP interrupting a TF binding motif. (H) DNA–protein interaction logo. (I and J) Screenshots from the built-in web application. (I) FASTA editor: the user can paste sequences to view and edit a motif in real-time. (J) Upload editor: the user can upload motifs in MEME, JASPAR, or TRANSFAC format and save or share them

LogoJS offers built-in support for standard DNA, RNA and protein logos in frequency and information content space (Fig. 1A and B). Input formats include position weight, probability, or frequency matrices (PWMs, PPMs and PFMs), raw-value matrices and FASTA sequences. When computing PWMs from other input formats, LogoJS offers several adjustable parameters. Small sample sizes can be accounted for by subtracting a small sample error correction factor from positions with few aligned sequences, or adding a constant pseudocount to each position. Users can also provide custom background frequencies for each symbol, and can choose to include alignment gaps in FASTA sequences in the total sequence count for each position. Using these options, LogoJS faithfully reproduces the output of existing tools; implementation details and a comparison against outputs from other tools are available in the Supplementary Figures S2–S4. Other methods for computing symbol heights are not explicitly supported but may be implemented by the user using the raw-value matrix input option.

LogoJS supports a wide range of sequence logos beyond standard DNA, RNA and protein logos. Users may generate logos using any combination of custom symbols including capital letters, lower-case letters and digits; an example using ‘MW’ to represent methylated CpG dinucleotides on the plus and minus strands is shown in Figure 1C. In contrast to many other packages, LogoJS can accept a raw-value matrix as input for letter heights, allowing for symbols with negative height (Fig. 1D). We also support the display of multiple consecutive letters or digits in a single position, which allows, e.g. logos with dinucleotide, trinucleotide, or even higher-order features (Fig. 1E and F).

Rendered logos are vector graphics, so custom annotations are easily added: a logo can, e.g. highlight a variant interrupting a motif (Fig. 1G) or illustrate interacting residues between DNA and protein sequences (Fig. 1H). The logos are also interactive; symbols can respond to mouse events through a bundled application programming interface, so the embedding application may update or display extended information when the user mouses over or clicks a part of the logo. This built-in interactivity is, to our knowledge, unique to LogoJS. An extended feature comparison with other tools is available in the Supplementary Material.

To demonstrate features of LogoJS and provide visual documentation, we deployed a companion web application at logojs.wenglab.org (Supplementary Fig. S1, right). Galleries of the use cases from Figure 1(A–H) are available within the application along with code to generate them. The application can also render logos from uploaded FASTA sequences or output from common tools and databases, such as MEME (Bailey et al., 2009, 2015), JASPAR (Khan et al., 2018) and TRANSFAC (Wingender et al., 1996). Users may download the resulting logos in vector or non-vector image formats, obtain code for embedding them at their website, or obtain links to share them with others (Fig. 1J). Users can also manually or programmatically generate direct URLs for logos using a combination of GET parameters for embedding or sharing. More details are available in the Supplementary Material.

In summary, LogoJS is a lightweight, open-source Javascript package offering flexible, extensible and interactive sequence logos for sharing and embedding in websites. To our knowledge, LogoJS offers the richest and most adaptable feature set of any existing Javascript logo package.