ChromoZoom logo

User Guide

Welcome! ChromoZoom aims to be the most interactive genome browser on the web for both curated and custom data, with a focus on ease of use and flexibility.

The interface

The ChromoZoom interface layout

  1. Click this to show or hide standard tracks for the current genome.

  2. Click this to add custom tracks from a local file or URL.

  3. Type a location to jump to it, or a gene or keyword to search for matching features.

    For example, in the yeast genome, you can type things like:

    • chrI:1234
    • chrI:1000-2000
    • swi1 – will find the SWI1 gene
    • YPL016W – the ORF name for SWI1
    • meiosis – find genes that have meiosis in their description
  4. Zoom down to the base-pair level, or back out to the chromosome level.

  5. Switch between multi-line and single-line mode. In multi-line mode, as shown in the screenshot, the genome "wraps" between lines like text in a paragraph.

  6. Track labels. You can drag the track labels to change the vertical ordering of the tracks, and resize them to "unpack" elements as vertical space allows.

  7. The "tank reticle." Green brackets show where the current view is centered. Zoom operations initiated by the zoom buttons, slider or keyboard are centered on this point.

  8. The genome switcher. Other available genomes can be accessed by clicking the up arrow.

Mouse interactions

ChromoZoom is designed for effortless navigation by mouse. A quick reference for the major mouse interactions can be found by clicking the "Getting started" link in the footer of the main interface.

Keyboard controls

Tracks

Click the show tracks... button to add or remove standard tracks from the display at any time.

We have provided the default tracks displayed by UCSC for the human genome, and all of the tracks displayable by UCSC for the yeast genome. Details on the data contained within each track and the drawing methods are accessible by clicking the show tracks... button, mousing over a track of interest and clicking the "more info..." link. Note that these pages are provided by UCSC, and changing settings will not affect the display in ChromoZoom.

Custom Tracks

ChromoZoom is rather unique among online genome browsers in that you can display custom data from a file on your local disk without uploading it to a server1. Using a local file is currently supported by Safari (version 6 or later), Firefox, Chrome, and Opera. Custom data stored on a webserver can also be used by providing the URL to the file.

We currently support the BED, bedGraph, WIG, VCFTabix, bigBed and bigWig formats, as they are specified by the UCSC genome browser. Note that they fall into two major categories:

Each format must begin with a track line that starts with the string track and specifies features and options for that track. This line either is followed by lines of tab-delimited data for the "small" formats, or contains a bigDataUrl pointing to an online file for the "big" formats. Here is a possible track line for a "small" format BED file, followed by tab-delimited data:

track type="bed" name="Reads Group A"
chr2 211000 215000 cloneA1
chr2 214000 216000 cloneA2
...

A track line for a "big" format like bigBed might read like this:

track type="bigBed" name="Track B" bigDataUrl=http://example.com/data.bb

Examples

BED, WIG, bedGraph

Here are some real-world examples of the "small" formats that are known to work with ChromoZoom, downloaded from the Saccharomyces Genome Database. Descriptions and authors of each dataset, including PMID, are recorded as comments within the files, which can be opened in any text editor.

Advanced BED features

Pasting a URL to a big format custom track

Our interpretation of the BED format now supports the depiction of introns, exons, and coding sequences (added Aug 2014). This is accomplished via use of the strand, thickStart, thickEnd, blockCount, blockSizes, and blockStarts columns. Therefore, it is possible to draw genes with the same visual language used in UCSC's gene tracks, i.e., arrows and thick/thin segments. An example BED file using these features can be viewed in ChromoZoom.

bigWig, bigBed

Using a "big" format requires a binary data file that must be uploaded to a public webserver. Although this is slightly more work than selecting a text file on your disk, the advantage of a "big" format is that much more data can be displayed per track. UCSC has published an article on the motivation for these formats and provides guidelines and tooling for creating bigBed and bigWig data files.

As an example, our default tracks for hg19 include a regulation track from the ENCODE project at UCSC that displays Layered H3K27Ac data (histone acetylation on H3 at residue K27). Perhaps you would like to visualize H3K4me3 data instead (methylation at H3 residue K4). UCSC supplies bigWig files for H3K4me3 on 7 cell lines produced by the Bernstein lab at the Broad Institute. Let's use the URL for the first one listed, a 434 MB bigWig file for GM12878 (lymphoblastoid cells).

The simplest way to use any of the "big" formats is to paste this URL directly into the Custom Tracks menu:

Pasting a URL to a big format custom track

...which produces this raw view in ChromoZoom. However, it is possible to set a nicer track name and other plotting options. To do this, you can construct a track definition line, which then contains the URL to the big data file as bigDataUrl.

track name="H3k4me3 Gm12878" type=bigWig  bigDataUrl=http://hgdownload.cse.ucsc.edu/goldenPath/hg19/encodeDCC/wgEncodeRegMarkH3k4me3/wgEncodeBroadHistoneGm12878H3k4me3StdSig.bigWig

This track definition can be pasted directly into the Custom Tracks menu, or saved as a text file that can be added like one of the small format files (either read from your disk or a public URL). Let's further customize the track by adding better Y-axis scaling, since as you may have seen in the prior view, the data has tall outlier peaks. It would also be kinder to the data provider to download and rehost the file on your own server, as we've done here.

track name="H3k4me3 Gm12878" type=bigWig autoScale=no viewLimits=0:50 maxHeightPixels=50:50:10 bigDataUrl=http://chromozoom.org/docs/examples/wgEncodeBroadHistoneGm12878H3k4me3StdSig.bigWig

Saving the above line into a text file and uploading it to ChromoZoom or pasting it into the Custom Tracks menu produces a well-formatted view in ChromoZoom. You can specify multiple "big" data files by simply adding more track lines to this file, which can be even be colored according to the schema used by UCSC's ENCODE track (view them in ChromoZoom).

Using bigBed files is an essentially equivalent process. The ENCODE project has also generated human microarray data describing RNA expression in various tissues. For example, UCSC provides bigBed files for Affymetrix performed on many cell lines by the Crawford Lab at Duke University. We can use the URL for the first bigBed file containing RNA expression for 8988t (a pancreatic cell line) to create the following track definition line:

track name="8988t Duke Affy Exon" type=bigBed  bigDataUrl=http://hgdownload.cse.ucsc.edu/goldenPath/hg19/encodeDCC/wgEncodeDukeAffyExon/wgEncodeDukeAffyExon8988tSimpleSignalRep1V2.bigBed

To visualize the actual scores for each exon, we need to add an option to use these scores to change the shading of the marks; also, we've moved to file to our own server for the purposes of the example.

track name="8988t Duke Affy Exon" type=bigBed useScores=1 bigDataUrl=http://chromozoom.org/docs/examples/wgEncodeDukeAffyExon8988tSimpleSignalRep1V2.bigBed

Saving the above line into a text file and uploading it to ChromoZoom or pasting it into the Custom Tracks menu will add this bigBed track to hg19 (view this in ChromoZoom).

Note that as of August 2014, ChromoZoom can also draw exons, introns, and coding sequences found in BED and bigBed files, allowing you to create views with the richness of detail seen in the UCSC gene tracks.

Which format do I use?

Linking

You may easily construct links from your webpages or web applications to ChromoZoom. These links can open ChromoZoom in a particular genome, located at a specific position, with certain tracks that should be visible, etc. Here is an example link that opens the yeast genome at the closest zoom level around chrII:4000 with the SGD Genes and the Restriction Enzymes tracks expanded to their fullest height. The URL is:

http://chromozoom.org/?db=sacCer3&position=chrII:4000@0.1&tracks=ruler:25|sgdGene:20|cutters:250

The simplest way to generate such a link is to open ChromoZoom, move it to the desired area and add/resize tracks until you are satisfied, and then copy the link from the "links" pulldown in the navbar. If you are using a modern browser (Chrome, Firefox, Safari, Opera) it will actually already be in your address bar.

To generate the link programmatically, the base URL is http://chromozoom.org/, and the following query parameters are available:

Source code

You can fork this project on Github.

Citing ChromoZoom

Please see our Application Note in Bioinformatics. The full citation is:

Pak TR, Roth FP. “ChromoZoom: a flexible, fluid, web-based genome browser.” Bioinformatics. 2013 Feb 1;29(3):384-6. doi: 10.1093/bioinformatics/bts695. Epub 2012 Dec 6.

License

ChromoZoom is free for academic, nonprofit, and personal use. The source code is licensed under the GNU Affero General Public License v3. In a nutshell, this license means that you are free to copy, redistribute, and modify the source code, but you are expected to provide the source for any code derived from ChromoZoom to anybody that receives the modified code or uses it over a computer network (e.g. as a web application). ChromoZoom is not free for commercial use. For commercial licensing, please contact the Roth laboratory.


  1. This is possible because of the magic of the HTML5 File API and Canvas