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
hundreds leaves (half a second for a tree with 864 leaves), although
the speed is web browser dependent.
This page is known to be fully functional on Safari 5, Opera 10.5,
Firefox 3.6 and Chrome. Image saving is not working in IE 8 due to the
lack of data URI
scheme; editing is not working in iOS 4. Nonetheless, on Windows,
Safari, Opera, Chrome and Firefox are recommended anyway because the
too slow and because `canvas' is not natively supported by IE 6/7/8.
Rendering this tree on IE 8 is 100-fold slower
than on Chrome/Opera/Safari.
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
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
Multifurcate. Click a node to multifurcate its parent
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.
Jstree works without network connections. The tree image is rendered
by the web brower rather than by a remote server. One can
grab jstree.zip, open the HTML
page and do all the edits locally. This zip file contains five files:
knhx.js is the library for parsing,
plotting and manipulating trees. It also responses to all mouse
simple popup menus, adpated from
the Pop-it library.
canvastext.js is a small library
for drawing texts in Canvas. It is possible to use the
system fonts to drop the dependency to this library. For some
combinations of OS/browser, doing this may help
efficiency. However, old IE does not support canvas texts. The
font in this library also looks more beautiful.