Simple Tree Diagrams for Web Pages

This a simple little Javascript script for drawing tree diagrams on web pages. It only requires Javascript (no jQuery needed) and degrades pretty gracefully if Javascript isn’t available.

Written by zrajm, October 2022, updated December 2022

HTML Structure

Each tree is defined by a <tree> tag, containing a nested set of <node> tags and an optional <treecaption> tag. Each tree is drawn as it scrolls into view (or otherwise become visible) rather than when the is page loaded—this to stop the browser from getting overwhelmed when processing pages with lots of trees.

As a tree is rendered, the HTML class drawn is added to it’s <tree> tag, and either the class branch or leaf is added to each of its <node> tags. This so that you may style the trees and nodes using stylesheets. Each branching node also have <line> tags added to the start of their content, one for each subnode. (The default CSS also has a pretty graceful degradation when Javascript isn’t enabled in the browser.)

To use the trees, include the relevant stylesheet, and Javascipt, then simply insert however many <tree> tags you require on your page. It should look something like this:

<link rel="stylesheet" href="tree.css">
<script src="tree.js"></script>

<tree>
  <node pos="S">
    <node pos="VP">
      <node pos="NP">
        <node pos="N"><b>tera’</b></node>
      </node>
      <node pos="V"><b>vIghoS.</b></node>
    </node>
  </node>
  <treecaption><i>I go to Earth.</i></treecaption>
</tree>

Appearance

The resulting trees look like this:

qa’vIn tlhutlh Dave. Dave drinks coffee. tera’ ghoS Dave. Dave goes to Earth. tera’ vIghoS. I go to Earth. tlhIngan Hol vIjatlhlaHbe’. I cannot speak Klingon. tlhIngan Hol jatlh neH Dave. Dave wants to speak Klingon.

Javascript Representation

One easy way to represent trees in text format is to use recursively nested lists, and let the first element of each list to be the label of that subtree. In a prettified text representation it might look like this (reusing the sentence I cannot speak Klingon, from above):

[_S [_VP [_NP [_N tlhIngan] [_N Hol]] [_V vIjatlhlaHbe’.]]]

The equivalent representation in Javascript is, of course, less pretty (though by adding some indentation we can at least make it semi-readable). In the following figure the function makeTree() is used to convert a Javascript-formatted tree into HTML, and the result is inserted adjacent to the code itself. (When using a helper function like this no graceful degradation is possible since Javascript is generating the underlying HTML.—Thus if Javascript is disabled in the browser, then, in this instance, no tree can be displayed at all.)

const htmlTree = makeTree(
  ['S',
    ['VP',
      ['NP',
        ['N', '<b>tlhIngan</b>'],
        ['N', '<b>Hol</b>']],
      ['V', '<b>vIjatlhlaHbe’.</b>']]],
  '<i>I cannot speak Klingon.</i>')
document
  .querySelector('#insertResultHere')
  .outerHTML = htmlTree

[Figure generated by Javascript]

There’s also a makeTreeNodes() function that is used internally by makeTree() to generate the tree branches inside the figure. (Have a look at the source code to see how it works.)

Inspiration

Above parse trees were taken from this video (which I found when I was looking around to see whether anyone had attempted to write a context-free grammar for Klingon):

Well, that’s it for now. Download the CSS file and Javascript file if you want to try it out for yourself, and have a look at the source code of this page for an example implementation. If you’re so inclined you could also have a look at the Github repository for this little thing, and you’re welcome to report any bugs or other issues that you might find via Github Issues.