Creating an experience through an animated tree-like graph using angular/d3/css3/(?)

Question

So I have a simple tree graph that is broken down into categories which may change later.

This will be strictly for ipad/chrome, so dont worry about legacy.

I would like the branches(lines) to kind of grow from each category(Voice/video Chat) to following nodes(hangouts, skype etc). I'm pretty sure that canvas is the best way to implement this. The data for the nodes and categories will be fetched from a javascript/json factory/model in angularJS. Can anyone at stack help me with a solution that could scale for changes and make clicks and animations simplistic for rapid changes.

If possible, extra comments in the realm of canvas (where I know almost nothing). This is a preemptive strike for me; so If, I'm asking for too much sorry.

Answer 1

D3 would probably be the way to go. It often comes with a steep learning curve though (at least for me, not having worked with SVGs before). Mike Bostock has a similar example: http://bl.ocks.org/mbostock/4339083

The nodes are interactive and have several layers of nesting. It's done as a left-right tree, rather than top - down like you're wanting. So it'll require modification to get it how you want.

Another example from Mike Bostock is: http://bl.ocks.org/mbostock/999346 . This is a top-down.