Simple TnT tree using polymer web elements
Miguel Pignatelli emepyc
Simple communication between web components
The scale method specifies if the tree should be rendered using the tree's branch lengths or not (true by default). Branch lengths are computed taking the branch_length property of the tree object. This is normally set automatically when your input is a newick formatted tree that includes branch lengths. If scale is set to false, branch lengths are ignored and the tree will display in an isometric layout (all paths from leaves to root having the same length).
TnT tree example showing how to render different labels in the same tree. The example first defines two different label renderers (two instances of tnt.tree.label.text). One to render internal labels taking the text from its branch length node property, and placing the labels in the upper left side of the node. The second to render leaf labels containing the name property of the node (default property) and placing them at the right of the node (default position). A third renderer (a general tnt.tree.label) uses the display and transform methods of one or the other depending on the node's type (leaf or not). This last label renderer is the one passed to the tree visualization.
TnT tree example showing different labels in the same tree using tnt.tree.label.composite. The transformation of each label in the composite label is calculated based on their cumulative width + 10 pixels to allow some extra space between them. But because the branch length label is not aligned to the node's name label, we set its width to -10. This makes the node's name label to display right next to the nodes.
Example of use of TnT Board. In this example, a new board is created and configured. Two tracks are then defining. The first one is a top-oriented axis track. The second track is 30 pixels high and displays one block from position 200 to 350 in the board. Once the board is configure the visualisation is ready to start
TnT Board example showing how to dynamically set wether the board should respond to panning or zooming events.
Example of asynchronous data retrieval for a TnT Board track. Instead of making calls to an external service, this example delays retrieving the data by 1 second.
Example of composite features in TnT Board.
Example of how to define custom features in TnT Board.