Genome browser

Genome browser web component works as conventional genome browsers such as the UCSC Genome Browser, providing visualization support for commonly used genomic data including bigWig, bigBed, tabix, and .hic format.

Visualization modes

Fig. 26 summarizes the configuration buttons of the genome browser panel in the top toolbar. Notably, since the Nucleome Browser supports synchronization across multiple panels, two additional navigation modes are introduced in the genome browser web components, i.e., Map mode and Context mode. Users can choose a visualization mode by clicking the visualization mode button (gb-mode) on the right of the genome browser toolbar.


Fig. 26 Genome browser web component toolbar

Normal mode

If a genome browser web component is in the normal mode (gb-mode-normal), it will automatically update itself according to operations dispatched from other web components (for genome browser component they must also be in normal or context mode). For example, when a user navigates to or highlights a genomic region in other web components, this genome browser component will also go to that region or show the same highlighted region. Conversely, any operations that happened in this component will broadcast simultaneously to other components. This mode is quite useful when you want to compare data hosted in different panels side-by-side.

Context mode

Context mode is quite similar to the Normal mode, except that users can set a zooming factor larger than 1x (e.g., 2x, 4x, etc.). If the zooming factor is 1x, the Context mode will act the same as the Normal mode. However, when a genome browser component has a zooming factor larger than 1x, this component will automatically zoom out by this scale factor relative to other components. For example, if other panels currently navigate to a 100kb region (e.g., chr1:10Mb-10.1Mb), a genome component with an 8x zooming factor will navigate to the 800kb region (chr1:9.65Mb-10.45Mb) centered on this 100kb region. To help users view the relationship between the default region and the zoomed-out region, a light green transparent box will be shown in this genome browser to highlight the region on which other panels are viewing at. This mode is quite useful when you want to capture the big-picture of a region-of-interest. For example, you can use one panel to visualize the details of a ChIP-seq peak and use another panel to reveal the context of the peak region without zoom-in and zoom-out back-and-forth.

Map mode

Finally, you can turn off the synchronization of a genome browser component by clicking the button of navigation mode until the icon becomes gb-mode-map. In the Map mode, this panel will not respond to any operations that happened in other panels, and will also not automatically broadcast its operations to other panels. However, users can still highlight a region in this panel and clicking the go-to button (gb-goto) to force all other panels to go to the highlighted region. This mode is useful when you want to use one panel to view the big picture and examine details in other panels.

Export browser view

Export screenshot

A save-to-png button (gb-screenshot) can directly export the screenshot of the current panel into a png image file. You can also create a high-quality image of the current genome browser’s view including the highlights using the print button (gb-print) in the genome browser toolbar. You can choose a file format for the downloaded image from pixel-based graphics (png format) and vector-based graphics (SVG, pdf). Vector-based graphics can be further edited for publication using the edit tool provided on the Nucleome Browser or commercial software such as Adobe Illustrator. Notably, the print function can only save the current panel into an image file. You need to save views for different genome browser panels one-by-one.


Fig. 32 Print the current view to png or SVG file

Remove guidelines

Clicking the remove guidelines button (gb-guideline), you can remove the vertical blue lines.


Fig. 33 Remove guidelines on the background

Configure tracks

Configure a single track

Right-clicking on one track label on the left, and choosing the config button from the drop-down list, you will see the configuration dialog. You can then customize the appearance of a track by modifying the configuration. Some explanations of settings are shown below:

  • alias: Set an alternate label for this track, which will be shown on the left of the track.
  • color: Select the primary color for a track.
  • height: Set track’s height (bigWig only).
  • mode: Choose a display mode for a bigWig or bigBed track from full and dense.
  • autoscale: Whether to automatically scale the min and max value for the bigWig track.
  • max: When autoscale is off, set the upper limit of the bigWig track.
  • min: When autoscale is off, set the lower limit of the bigWig track.
  • norm: Select normalization method for .hic matrix.
  • oe: Whether to display observed vs expected (O/E) contact matrix rather than observed matrix for .hic data.
  • min_bp: Set the minimum resolution for a Hi-C contact matrix.

Fig. 34 Configure a single track

To hide a track, you can right-click on the track label and click the hide button from the drop-down list. To re-order a track, you can drag that track and move it up or down to the preferred location.

Batch-configuration tool

You can also configure a series of tracks together using the batch-configuration tool. Clicking the batch-configuration button (gb-batch-config) in the genome browser panel toolbar, you will see the dialog of the batch-configuration tool. In this tool, you can select multiple tracks (holding the Control key to add a track one-by-one or the Shift key to select a range of tracks) and modify their appearance at the same time. Notably, only bigWig tracks are supported in this tool. This tool is quite useful to convert a large number of tracks into dense mode or set the same color for those tracks.


Fig. 35 Batch configure multiple bigWig tracks

We also provide two buttons to directly convert all bigwig tracks from the full view to a compact view and vice versa. You can access these buttons in the toolbar of the genome browser web component.


Manage tracks

Clicking the configuration button (gb-config) on the toolbar of the genome browser panel, you will see the configuration interface. You can also click the panel-configuration button (panel-config) on the top-right of the panel to enter the configuration interface. In the configuration interface, you will see the web page is separated into three parts: 1) data service module on the top; 2) currently loaded tracks shown on the left; 3) available tracks from data service on the right.

In the data service module, you can add data service to the existing list of genomic data services.

In the currently loaded track module, you can quickly re-order tracks by dragging a track, view meta-information for a track, and super-impose a track on a 3D structure (see the 3D structure web component below).

In the available tracks module, you can select a datasheet and add tracks to the list of loaded tracks. You can filter tracks by clicking the search button and type in the keywords. Clicking the read-more button, you will be directed to a new website showing extra information about this track (for 4DN data, this leads to the meta-information website on the DCIC data portal).


Fig. 36 Add or remove tracks in the configuration interface of the genome browser component

Scatterplot tool

Nucleome Browser provides a convenient scatterplot tool to interactively compare signals between two bigWig tracks. Clicking the scatterplot button (gb-scatterplot), a window will appear on the right side of the genome browser panel. After you select which tracks to be shown in the X-axis and Y-axis, an interactive scatterplot will be shown. In this scatterplot, each dot indicates a genomic bin (the size of the genomic bin will be automatically adjusted based on the size of the currently viewed region). Notably, if you highlight regions on genomic tracks or the ideogram of a chromosome, corresponding dots will also be highlighted (by a different color) in the scatterplot. When you drag the highlighted region, highlighted dots will automatically update. Conversely, when you use the rectangle or lasso selection tool to manually select a set of dots on the scatterplot, those regions will be highlighted on the tracks as well.

This tool is quite useful to facilitate researchers to discover interesting regions showing an unexpected relationship between two signals. For other functions of the scatterplot tool such as pan, zoom, reset, etc., you can view the documentation on the Plotly website (


Fig. 37 Use the scatterplot tool to explore the relationship between two bigWig tracks