Jstree is a web application as well as a Javascript library for
parsing, manipulating and plotting phylogenetic trees in the Newick
format. With Jstree, one can highlight subtrees or leaves, collapse
nodes in viewing, swap children, reroot, delete clades, move nodes,
and export tree images, all via mouse clicks. It is purely implemented
in Javascript and HTML5, and is efficient enough for trees with
hundreds leaves (half a second for a tree with 864 leaves), although
the speed is web browser dependent.
Requirements
This page is known to be fully functional on Safari 5, Opera 10.5,
Firefox 3.6 and Chrome. Nonetheless, on Windows, Safari, Opera, Chrome and
Firefox are recommended anyway because the Javascript engine in IE 6/7/8
is far
too slow and because `canvas' is not natively supported by IE 6/7/8.
Usage
- To view a phylogenetic tree, paste the tree in
the Newick
format to the Input area (or
use the example),
click the canvas area and select "Draw".
- Clicking the white area in the canvas will bring up a popup menu,
allowing you to:
- Draw. Draw/redraw the tree with the current settings:
- Width. The width of the image. For the rectangle view, the height of the image will be adjust automatically.
For the circular view, the height always equals the width.
- Font size. For the circular view, this is the maximum the font size. The actual font size
will be adjusted such that there is no overlaps between leaves.
- Spacing. The spacing between leaves. Not effective in the circular view.
- 2nd label. The regular expression to match the secondary label of an internal node. Not effective in the circular view.
- Pylogram. Check this to ignore the branch lengths.
- Circular. Check this to switch to the circular layout.
- PNG. Expore the tree picture as a PNG image.
- Undo/Redo. Undo the most recent editing. Only one undo is allowed.
- Search. Search for leaves matching a regular expression.
- Clicking a node will bring up a popup menu, allowing you to
perform the following actions:
- Swap. Click an internal node to swap its children.
- Ladderize. Click a node to sort the clade such that the
deeper leaves tend to be placed higher in the plot; in case of a
tie, a leaf with lexicographically smaller names tends to be
placed ahead.
- Collapse. Click a node to collapse/uncollapse all its
descendants to one node.
- Reroot. Click a node to put the root in the middle of
the edge between the node and its parent.
- Move. Click two nodes to prune the subtree descending
from the first node and then regraft it to the edge between the
second node and its parent.
- Remove. Click a node to delete it and all its
descendants.
- Multifurcate. Click a node to multifurcate its parent
node.
- Highlight. Click a node to highlight the entire clade.
When a clade is highlighted, the Newick substring corresponding
to the clade will be selected in the Input box. Given a huge
tree, the selected text may not been seen in Opera, Chrom and
Safari. In this case, one may need to scroll back a little to
see the selected text.
License
This page and the knhx.js JavaScript is written
by Heng Li. The page
and the script are released under the MIT/X11 license. Canvastext.js is
acquired here. It is also
open source.