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).

Euthenics

Answer 1

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

Hydrostatic

Thanks, that's an awesome link! It's an almost perfect replacement for what I want. I just wish it also accepted input with parentheses instead of just square brackets. – Euthenics

Answer 2

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.

Acanthaceous

This is awesome. Could you make it accept parentheses in addition to brackets as the marker of constituents? E.g.: I want to be able to render the example tree using (S (NP This) (VP (V is) (^NP a wug))). – Euthenics

I had no plans to do this because I don't want to introduce too many special characters. I think that square brackets are the norm in linguistics. However, I encourage you to fork the project and alter it to your needs. – Acanthaceous

as far your solution is helpful, stackoverflow is ok with this – Marinamarinade

+1, I reckon as long as one states up-front about business/project promotion, and if it's relevant, then it's fine. – False

I should also note a few other, similar solutions (these are not mine): phpSyntaxTree, RSyntaxTree. – Acanthaceous