TnT Genome is a javascript library for displaying genome based annotations on the web. It has been built on top of the TnT Board library and shares with it the same phylosophy and design principles: a powerful API written with flexibility in mind that allows the creation of simple, dynamic and useful genome-based visualisations. The goal of TnT Genome is not to provide a full-featured genome browser but a simple tool to create specific and simple genome views. Its flexibility also allows the exploration of new ways of visualising genome-based annotations.
Like TnT Board, TnT Genome defines several elements to facilitate the creation of visualisations: a board that is a container for tracks, tracks that are independent units of data representation, data retrievers to get the data synchronously or asynchronously and visual features to display the available data. Check the documentation for TnT Board to get more details about these elements.
On top of TnT Board, TnT Genome offers new features for genes and transcripts, a data retrievers for ensembl data (using the Ensembl Rest API) and a layout for distributing genes and transcripts avoiding overlaps between elements. Check the API documentation to get more details about these new elements
Examples are a fundamental part of TnT documentation. Check more in the examples page
// Genome is a TnT Board. Location and axis tracks are included by default
var genome = tnt.board.genome().species("human").gene("brca2").width(950);
var gene_track = tnt.board.track()
.height(200)
.color("white")
.display(tnt.board.track.feature.genome.gene()
.color("#550055")
)
.data(tnt.board.track.data.genome.gene());
var sequence_track = tnt.board.track()
.height(30)
.color("white")
.display(tnt.board.track.feature.genome.sequence())
.data(tnt.board.track.data.genome.sequence()
.limit(150)
);
genome
.zoom_in(100)
.add_track(sequence_track)
.add_track(gene_track);
genome(document.getElementById("mydiv"));
genome.start();The above example starts by defining a genome board using the human BRCA2 gene as its reference location. The code also defines two tracks. The first one is a gene track and the second one is a sequence track. These tracks pulls data from the Ensembl REST API using the coordinates provided by the board (ie, BRCA2 coordinates). Once defined, the tracks are attached to the board. Once it is configured the visualisation is ready to start.
TnT Genome can be linked directly from the github repo. It depends on the d3js and this library needs to be linked before tnt.genome
// D3js
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
// TnT
<link rel="stylesheet" href="https://tntvis.github.io/tnt.genome/build/tnt.genome.css" type="text/css" />
<script src="https://tntvis.github.io/tnt.genome/build/tnt.genome.js" charset="utf-8"></script>It is also possible to install the source code and build the library locally. This can be achieved either by using npm or github:
npm install tnt.genome
git clone https://github.com/tntvis/tnt.genome
cd tnt.genome
npm install
npm build-browser
TnT works on HTML5, CSS3 and SVG-compliant browser, which generally means any "modern browser". The TnT library and themes are tested regularly against Chrome (Chromium) and major changes are regularly tested in recent versions of Firefox, Safari (Webkit) and Opera. It has been also tested in IE versions 9+. If you find any problem, please let me know.
The TnT library depends on the D3.js library. Check its browser's compatibility note for more information.
Please, send any feedback to emepyc@gmail.com. Bug reports and feature requests are also welcome in the issue tracker