TnT

Visualization of Trees and Track-based annotation

#Introduction

TnT is a javascript library built on top of TnT Tree and TnT Board for displaying trees and associated track-based annotations. It uses D3.js and has been designed with a powerful API that allows the creation of expressive and dynamic tree and corresponding annotations.

There are several components that need to be set up in this visualisation: the tree, the board where the annotation is displayed and a track function that creates tracks for each leaf in the tree. All the methods described in TnT Tree and TnT Board are available plus some specific to TnT to synchronise the tree with the board.

#Example

// The tree
var tree = tnt.tree()
    .data(tnt.tree.parse_newick("((human, chimp),mouse)"))
    .width(500)

// The board
var board = tnt.board()
    .width(400)
    .from(0)
    .to(1000)
    .max(1000);

// The function to create tracks for each tree leaf
var track = function (leaf) {
    var data = leaf.data();

    return tnt.board.track()
        .color("white")
        .data(tnt.board.track.data.sync()
            .retriever (function () {
                var elems = [];
                // populate elems and then return them
                return elems;
            })
        )
        .display(tnt.board.track.feature.block()
            .color("steelblue")
            .index(function (d) {
                return d.start;
            })
        );
}


// The TnT Vis
var vis = tnt()
    .tree(tree)
    .board(board)
    .track(track);

vis(document.getElementById("mydiv"));

The above example creates a new tree and board. It also creates a new track function that creates new tnt.board.tracks from tree leaves. Once all these elements are defined and configured they are attached in a new tnt visualisation. This visualisation is then started using the given DOM element as its container.

#Installation

TnT can be used linking to the library directly. It depends on d3.js and this library needs to be linked before TnT.

<!-- D3 -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<!-- TnT -->
<link rel="stylesheet" href="http://tntvis.github.io/tnt/build/tnt.css" type="text/css" />
<script src="http://tntvis.github.io/tnt/build/tnt.min.js" charset="utf-8"></script>

It is also possible to install the source code and build the library locally:

• Using npm:

  npm install tntvis
          

• Building from Git:

  git clone https://github.com/tntvis/tnt
  cd tnt
  npm install
  npm build-browser
          

#Browser support

TnT works on HTML5, CSS3 and SVG-compliant browser, which generally means any "modern browser". The TnT library and the other TnT-related libraries 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 only on the D3.js library. Check its browser's compatibility note for more information. TnT themes may depend on other libraries and components for enhanced functionality. Check the documentation of the corresponding TnT theme for more information

#Feedback

Please, send any feedback to emepyc@gmail.com. Bug reports and feature requests are also welcome here