This project provides a JavaScript library for constructing interactive SVG images of tree structures. This is useful in depicting parse trees as are common in linguistics and computer science. The library provides hooks for toggling the collapsing or extending branches in the tree.

The first iteration of this project I developed back in 2004, and the old project page with original demos is still available. In Autumn 2009 I took an online syntax course through the University of Washington's CLMA program, and this course required a lot of tree drawing. Having previously created an SVG tree drawer, I wanted to do my course work using a browser-based technology instead of using LaTeX. However, since the course was about HPSG, each node in the tree was not a simple label as I had been used to, but rather a complex attribute-value matrix (AVM). So I set out to rewrite my SVG tree drawer to bring it up to date and to allow arbitrary content in each of the nodes so that I could use MathML to render the AVMs.

The following screenshots link to interactive SVG images of the examples:

Note: This example uses XHTML (application/xhtml+xml), XSLT, XML, MathML, and SVG together; your browser may not support all of the necessary technologies.

Developed by Weston Ruter (@westonruter). Code licensed GPL