Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
23 lines (13 sloc) 2.71 KB

SVG Tree Drawer

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.

Background

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.

Examples

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

Simple tree: “The boy plays with the ball.”

Tree of “The boy plays with the ball.”

Tree with AVMs: “They seemed close to me.”

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

Parse tree with AVMs for “They seemed close to me.”

Credits

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

Something went wrong with that request. Please try again.