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.
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.
TnT can be used linking to the library directly. It depends on d3.js and this library needs to be linked before TnT.
It is also possible to install the source code and build the library locally:
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