How to draw a Tree/Cladogram with Vega?

[Yuri Astrakhan]

Hi, what is the easiest way to draw a simple Cladogram with Vega? Thanks!

StackOverflow: http://stackoverflow.com/questions/34398517/how-to-create-cladogram-graphs-with-vega

[Roy I]

Vega v2.4.0/2.4.2 includes new "treeify" transform:

https://github.com/vega/vega/releases

Examples of Vega spec for treeify (by Jeff Heer):

https://github.com/vega/vega/pull/425

The online Vega editor has not been updated yet to this latest version:

https://groups.google.com/forum/?fromgroups=#!topic/vega-js/OPEZs7wPdEk

Examples

1. Radial tree

2. Cartesian tree with absolute sizing

5. Cluster dendrogram

6. Radial dendrogram:

[Yuri Astrakhan]

Roy, this is amazing, thank you!!!  I suspect that the only difficulty now is how to make this into a clickable version -- we currently render everything on the server as PNGs, or allow "click to interact" (play) button which loads vega and data to the client (which is slow).  But if all we want is to draw a cladogram with labels, SVG would be the best option -- we draw it as an SVG on the server, and that SVG would have links as tree nodes.  We will also have to finish our SVG sanitization system to prevent any malicious code in the SVG output.

[Yuri Astrakhan]

P.S. The online Vega editor has bee updated to 2.4.2, but those graph specs have to be copy/pasted.