Scribl: An HTML5 Canvas-based graphics library for visualizing genomic data over the web

Department of Biology, Boston College, 140 Commonwealth Ave., Chestnut Hill, MA 02467.
Bioinformatics (Impact Factor: 4.98). 11/2012; 29(3). DOI: 10.1093/bioinformatics/bts677
Source: PubMed


High-throughput biological research requires simultaneous visualization as well as analysis of genomic data, e.g. read alignments, variant calls and genomic annotations. Traditionally, such integrative analysis required desktop applications operating on locally stored data. Many current terabyte-size datasets generated by large public consortia projects, however, are already only feasibly stored at specialist genome analysis centers. As even small laboratories can afford very large datasets, local storage and analysis are becoming increasingly limiting, and it is likely that most such datasets will soon be stored remotely, e.g. in the cloud. These developments will require web-based tools that enable users to access, analyze and view vast remotely stored data with a level of sophistication and interactivity that approximates desktop applications. As rapidly dropping cost enables researchers to collect data intended to answer questions in very specialized contexts, developers must also provide software libraries that empower users to implement customized data analyses and data views for their particular application. Such specialized, yet lightweight, applications would empower scientists to better answer specific biological questions than possible with general-purpose genome browsers currently available.

Using recent advances in core web technologies (HTML5), we developed Scribl, a flexible genomic visualization library specifically targeting coordinate-based data such as genomic features, DNA sequence and genetic variants. Scribl simplifies the development of sophisticated web-based graphical tools that approach the dynamism and interactivity of desktop applications.

Availability and implementation:
Software is freely available online at and is implemented in JavaScript with all modern browsers supported.

79 Reads
  • Source
    • "1 Associate Editor: Prof. Martin Bishop such as genome browsers (Hoy, 2011; Medina et al., 2013; Miller et al., 2013 "
    [Show abstract] [Hide abstract]
    ABSTRACT: Java has been extensively used for the visualization of biological data in the web. However, the Java runtime-environment is an additional layer of software with an own set of technical problems and security risks. HTML in its new version 5 provides features that for some tasks may render Java unnecessary. ALIGNMENT-TO-HTML is the first HTML-based interactive visualization for annotated multiple sequence alignments. The server-side script interpreter can perform all tasks like (I) sequence retrieval (II) alignment computation (III) rendering (IV) identification of a homologous structural models and (V) communication with BioDAS-servers. The rendered alignment can be included in web pages and is displayed in all browsers on all platforms including touch screen tablets. The functionality of the user interface is similar to legacy Java applets color schemes, highlighting of conserved and variable alignment positions, row reordering by drag&drop, interlinked 3D-visualization and sequence groups. Novel features are (I) support for multiple overlapping residue annotations, such as chemical modifications, SNPs and mutations. (II) mechanisms to quickly hide residue annotations, (III) export to MS-Word, and (IV) sequence icons.Conclusion: ALIGNMENT-TO-HTML, the first interactive alignment visualization which runs in web browsers without additional software, confirms that to some extend HTML5 is already sufficient to display complex biological data. The low speed at which programs are executed in browsers is still main obstacles. Nevertheles, we envision an increased use of HTML and Java-Script for interactive biological software. Under GPL at:
    Bioinformatics 11/2013; 30(1). DOI:10.1093/bioinformatics/btt614 · 4.98 Impact Factor
  • Source
    • "Interactive visualization is mostly limited to stand-alone tools or Java applet plugin (Pavlidis and Noble, 2003; Perez-Llamas and Lopez-Bigas, 2011; Reich, et al., 2006; Saeed, et al., 2003; Saldanha, 2004). The rapid development of information technology , especially HTML5 and JavaScript has presented new opportunities to overcome this limitation (Miller, et al., 2013; Tan, et al., 2013). Here we present INVEX (Integrative Visualization of Expression data) – an intuitive web-based tool that seamlessly integrates server-side capabilities for data analysis and annotation with * To whom correspondence should be addressed. "
    [Show abstract] [Hide abstract]
    ABSTRACT: Gene expression or metabolomics data generated from clinical settings is often associated with multiple metadata (i.e. diagnosis, genotype, gender, etc.). It is of great interest to analyze and to visualize the data in these contexts. Here, we introduce INVEX - a novel web-based tool that integrates the server-side capabilities for data analysis with the browse-based technology for data visualization. INVEX has two key features: 1) flexible differential expression analysis for a wide variety of experimental designs; and 2) interactive visualization within the context of metadata and biological annotations. INVEX has built-in support for gene / metabolite annotation, and a fully functional heatmap builder. Freely available at
    Bioinformatics 09/2013; 29(24). DOI:10.1093/bioinformatics/btt562 · 4.98 Impact Factor
  • Source
    • "Thus, JBrowse (6), the NCBI viewer ( or Genome Projector (5) use Javascript, Ajax and SVG. Actually, SVG is starting to be used by recently released genome browsers such as the Scribl (24), published while this manuscript was submitted, and the not yet published Genoverse ( Other genome browsers like Dalliance (7) also use DAS technologies. "
    [Show abstract] [Hide abstract]
    ABSTRACT: Genome browsers have gained importance as more genomes and related genomic information become available. However, the increase of information brought about by new generation sequencing technologies is, at the same time, causing a subtle but continuous decrease in the efficiency of conventional genome browsers. Here, we present Genome Maps, a genome browser that implements an innovative model of data transfer and management. The program uses highly efficient technologies from the new HTML5 standard, such as scalable vector graphics, that optimize workloads at both server and client sides and ensure future scalability. Thus, data management and representation are entirely carried out by the browser, without the need of any Java Applet, Flash or other plug-in technology installation. Relevant biological data on genes, transcripts, exons, regulatory features, single-nucleotide polymorphisms, karyotype and so forth, are imported from web services and are available as tracks. In addition, several DAS servers are already included in Genome Maps. As a novelty, this web-based genome browser allows the local upload of huge genomic data files (e.g. VCF or BAM) that can be dynamically visualized in real time at the client side, thus facilitating the management of medical data affected by privacy restrictions. Finally, Genome Maps can easily be integrated in any web application by including only a few lines of code. Genome Maps is an open source collaborative initiative available in the GitHub repository ( Genome Maps is available at:
    Nucleic Acids Research 06/2013; 41(Web Server issue). DOI:10.1093/nar/gkt530 · 9.11 Impact Factor
Show more