HiGlass: A Multiscale Data Browser

HiGlass is a viewer for large-scale genomic data. It takes ideas introduced in genome browsers such as the UCSC Genome Browser and combines them with inspirations from more recent HiC data browsers such as Juicebox and implements them in a framework inspired by modern online maps (so-called slippy maps) to form a fast, extensible and responsive viewer for diverse types of genomic data.

The HiGlass application actually consists of four distinct components:

higlass-client - This is the Javascript library that displays heatmaps, tracks, etc. In a sense, this is the meat of the application. The vast majority of the updates are on this component.

higlass-website - This is the website that embeds the higlass-client. It can contain multiple higlass clients (as on the front page of higlass.io).

higlass-server - The server manages data and serves it to the client in small chunks that match the current zoom level and location. It is a python django application that exposes an API. For example, http://higlass.io/api/v1/tilesets lists the tilesets that the server knows about.

higlass-docker - This docker container contains all three of the above repositories and packages them so that they can be easily run without having to install and run each separately. An update in any of the above repositories will be reflected in an update in the docker container. The versions of all the components is accessible at http://higlass.io/version.txt

Track types

HiGlass supports both 1D and 2D track types that can be arranged in views to show desired combinations of data.

_images/bedlike-track-thumb.png

Bed-like intervals

_images/gene-annotations-track-thumb.png

Gene annotations

_images/chromosome-labels-thumb.png

Chromosome labels

_images/line-track-thumb.png

Line

_images/point-track-thumb.png

Point

_images/horizontal-heatmap-thumb.png

Horizontal heatmap

_images/horizontal-2d-rectangle-domains-thumb.png

Horizontal rectangle domains

_images/heatmap-track-thumb.png

Heatmap

_images/chromosome-grid-thumb.png

Chromosome grid

It can be used to display a variety of track types populated with data from different file formats.

_images/higlass-heatmap-screenshot.png

A screenshot of HiGlass displaying a Hi-C contact matrix along with tracks for gene annotations chromosome labels.

_images/higlass-dual-genome-browser-screenshot.png

A screenshot of HiGlass displaying a context-detail type view of two regions of the mouse genome. The locations of the two detail regions on the bottom are highlighted in the context view on top.

Technology

HiGlass is built with a variety of different open source components. The most crucial are listed below.

  • D3.js - an outstanding library for online data visualization. We make heavy use of D3’s scales, zoom behavior and brush behavior.
  • Pixi.js - a fast, easy to use and most importantly, well-documented library for drawing scene graphs on html canvases. Oh, and it has WebGL support. We use Pixi to quickly render track data and perform updates on zooming and panning.
  • React - a widely used library for managing state within web applications. We use React to manage the user-interface components and lay out the positions of the views and tracks.