Introducing pileup.js, a Browser-based Genome Viewer19 Jun 2015
While it’s still in the early stages of development, it can already load and visualize data from a variety of sources:
(pileup.js showing the reference genome, variants, genes and a pileup view of alignments)
pileup.js was inspired by two existing genome browsers: Biodalliance and IGV. Biodalliance is also designed to run in the browser, while IGV is a standalone Java desktop application (though the IGV team has recently begun work on a browser-based version, IGV.js).
- We use node-style modules via
requireand browserify. We pull in third-party dependencies via npm.
- We use Mocha for testing and coveralls.io for tracking code coverage. We strive for very high test coverage: pileup.js is currently at 94%.
In addition to modern tools, we’ve adopted several modern libraries:
- We make extensive use of Promises (via Q). Promises are a major improvement over the older callback style of asynchronous coding. They result in clearer control flow and greater composability.
- We use ReactJS to keep the various components of the pileup viewer in sync.
- We use D3 to render the visualizations in SVG layers.
By using SVG, we allow the tracks to be styled and positioned using CSS. This facilitates complex layouts and is more approachable for web developers than custom styling systems.
While pileup.js is being developed primarily for use within CycleDash, we expect that it will find uses in other web applications as well. The data fetching/parsing logic and the display are fully separated, so a web app could use pileup.js code to fetch BAM reads, for example, without rendering a visualization.
Future areas for work include:
- Improving performance. While load times and frame rates while panning are acceptable today, we’d like to improve both in the future. This may require switching the rendering layer from SVG to canvas or WebGL.
- Adding more visualizations, for example read depth for alignment tracks or gene expression data.
- Factoring out the data-fetching code into a separate NPM package for easier reuse.
Please give pileup.js a try and let us know what you think. The best way to give feedback is through our issue tracker.