Creating dynamic graphs for Data Analytics: is AngularJS the right choice?

[Alec Taylor]

Recently I have begun using Google AngularJS to consume my
Python-built RESTful JSON-talking API.

However I have a Data Analytics project which will require dynamic
graphs of all sorts,
e.g.: pie, line, plot, node-link[1], polar graphs[2] and those
big-data graphs showing interconnections + having node diameter
related to its relative value[3].

I will also have a <table> showing record and/or aggregate level
information and search functionality.

(this is a not-for-profit project FYI)

Would AngularJS be the right choice for this project, or would you
recommend combining it with another framework? - If so, which
framework/library?

Thanks for all suggestions,

Alec Taylor

References:
[1] http://i.stack.imgur.com/x4Xar.png
[2] http://goldensoftware.com/images/lofthumbs/600x300/templates/golden_software/images/polar1s.gif
[3] http://gigaom2.files.wordpress.com/2012/03/canvas-copy.jpg

[johntom]

Hi,

I have a plunker that builds both google and highcharts pie charts depending on grouping of ng-grid columns. 

http://plnkr.co/edit/YM4If9zFRqnnDw5kFE2c?p=preview

HTH

John

[Owen M]

I'm currently using Angular with D3. Being able to create a chart directives is pretty sweet:

<pie-chart ng-model="my_source">
Then using the two-way data binding, changing your dataset can have really nice animations directly in your charts. Makes for a very slick interface.

To do the actual charting I'm using D3. Bit of a learning curve, but great tool:

http://d3js.org/

There are some great examples to learn from:

https://github.com/mbostock/d3/wiki/Gallery

There are tools built on top of d3 which could give you a head start. A quick search will reveal others. Millage my vary with these and I personally haven't used any of them.

http://nvd3.org/

[Justin Mandzik]

Hi Owen!

I'm also using d3 and Angular and having a good time with it so far.  As of late I'm running into a bit of a roadblock with d3 Treemaps in particular that I haven't hit with the usual bar/pie/line charts.  Specifically, I'm trying to 2 way bind the model in my treemap directive via  scope { treeData: '=' }.  As the model changes propagate with subsequent Ajax calls, something is getting screwed up... d3's selections aren't noticing the change in the data the way they usually do.  

A wild guess has me thinking that because d3's treemap.nodes() method modifies the object directly that theres some changes not digesting properly.  Have you had any luck with treemaps?  

[Owen M]

I could be doing this very wrong, but here is the directive I've setup for doing charting with d3. Bunch of stuff chopped out for brevity:

https://gist.github.com/owenmead/5511756

Biggest thing is setting up a watch on chart_queries and passing `true` as the last parameter to "compare object for equality rather than for reference." So if something changes deep in your query data structure, the watch will be triggered and your chart will update.

I don't have any personal experience with Treemaps but hopefully something in there helps.