Render linguistic syntax tree in browser

Question

The input is either:

(1) a bracketed representation of a tree with labeled internal nodes such as:

(S (N John) (VP (V hit) (NP (D the) (N ball))))

with output:

(Whether the lines are dashed and whether the caption is present are not significant.)

Or the input could be:

(2) a bracketing on words without labels e.g.:

((John) ((hit) ((the) (ball))))

with output same as above (no internal labels this time, just the tree structure).

Another component of the input is whether the tree is labeled as in (1) or unlabeled as in (2).

---

My question: What is the best way (fastest development time) to render these trees in the browser in javascript? Everything should happen on the client side.

I'm imagining a simple interface with just a textbox (and a radio button specifying whether it is a labeled tree or not), that, when changed, triggers a tree to render (if the input does not have any syntax errors).

Answer 1

I'm not sure what the policy is for self-plugs on stackoverflow. I apologize if this is breaking the rules.

Have you seen my solution for this? mshang.ca/syntree

It's not exactly what you want, but you are free to steal the code if it helps.

Answer 2

Actually there is server side library to convert bracketed representation into tree, phpsyntaxtree.
You can reimplement them using javascript graphic library like jsdraw2d or roll you on javascript using HTML5 canvas.

10 Best Javascript Drawing and Canvas Libraries