Display (syntax) trees in webpage

Question

I want to be able to display dynamic syntax trees on a webpage, possibly with a jQuery component. To show you what I mean, this

Syntax tree

is a syntax tree, and this is the general way I want it to be displayed.

How do I build something like this with HTML and CSS?

edit: Solution

Just in case somebody who finds this question later is trying the same, here's what I did:

I ended up drawing the tree with Graphviz as an SVG, and then, moving the svg tree inside the DOM using some magic. That way I could still interact with the elements, e.g. drag&drop or hover/click events.

The result can be seen here.

and wat is the question?

paka
– paka

2013-06-27 12:21:33 +00:00
Commented Jun 27, 2013 at 12:21 — paka
– paka, Commented Jun 27, 2013 at 12:21
How do I build something like this with HTML and CSS?

L3viathan
– L3viathan

2013-06-27 12:24:11 +00:00
Commented Jun 27, 2013 at 12:24 — L3viathan
– L3viathan, Commented Jun 27, 2013 at 12:24

Mentok · Accepted Answer · 2013-06-27 12:24:11Z

1

Try d3, it has a really good tree visualization

answered Jun 27, 2013 at 12:24

Mentok

5974 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrea Scarcella · Accepted Answer · 2013-06-27 12:28:29Z

1

Another option is ArborJs, you can find an introduction here

answered Jun 27, 2013 at 12:28

Andrea Scarcella

3,3632 gold badges24 silver badges26 bronze badges

1 Comment

L3viathan Over a year ago

I'm not sure, it seems to do too much by itself. One of the requirements for my scenario is that the root node is always on top, daughter nodes are on the next level and so on.. But I'll look into it.

Collectives™ on Stack Overflow

Display (syntax) trees in webpage

edit: Solution

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

edit: Solution

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related