SVG Manipulation and data visualization. Is AngularJS and two-binding the right choice?

[Nicola G.]

Hi everyone, I am very active with AngularJS as well as with D3.

I find fascinating the way Angular simplifies stages of development. What is interesting is that I can write straight away some logic into the HTML.

I have been recently applied AngularJS to SVG. I can therefore bind a variable to the starting or the ending point of a line, the thickness of the stroke and what color should I feel a rect. In addition with CSS 3 I can smooth all the movement and transitions. So to the question, can I use AngularJS for simple SVG manipulation, the answer is yes, and it is as well very easy (even though at the moment I am playing very low level svg manipulation).

Now, D3 is a very great library, however given the potentiality of using straight Angular+SVG, I start to doubt what can I really do more with D3? Going in the angular way, I don't need to do any binding of data with d3 and visualisations, I don't need to trigger any transformations and I don't have to use any selector to find the doms to edit. So with Angular+SVG I am a very little step away to use it instead of D3.

What scares me is performances. When I have over 2.000 points to plot and to edit, how would AngularJS perform on that? Is Angular suited for this job? Am I stretching too much what angular is meant for? Is straight manipulation of DOMs that D3 does, more suitable and therefore not replaceable by Angular? Can AngularJS change the way we do Data Visualisation with simplify the d3 way?

Thanks,

n

[Sander Elias]

Hi Nicola,

There is no straight yes or no answer to this question. The answer will always be: it depends on your app!

2000 data points is not a problem. If you are putting a load of (heavy) watches on those, it might slow down to a crawl. 

The only thing that I can say, is you have all the knowledge to try it out. You already builded stuff with (a few) datapoints. 

extrapolate that, so you have a lot of point, and benchmark/test your stuff. If it is too slow, make a plunk out of it, and come

back here, so you can have an extra set of eyes on it. 

In your situation it might be too much for angular, but at least you know.

I think you might be surprised with what AngularJS can handle!

Regards

Sander 

[Nicola Greco]

Thanks for your answer Sander.
While I think that trying is always good, I think instead of hacking it, I would like to approach it theoretically and from first principles.

To give you an example, just dirty checking might be stopping. If I have 2.000 points, will it replicate that? if I add +10 to each what will happen?
If I filter the 2.000 points by x > 10 and that would also change other visualisations, what will happen?

So before really going into testing/implementing it (my plan is to write a d3-angularised version), I want to make sure that my vision of “simplifying data viz coders life” with data-binding, won’t be obstructed by obvious implementations of angular that don’t suit this sort of problems. Therefore my questions above! Am I doing something wrong in using angular for Data Visualisation?

Thanks anyway for your valuable comment, that has definitely been a trigger for me to test it out anyway :)

Nicola

> --
> You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/NFgnoBBFNt8/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Nicola,

While I think that trying is always good, I think instead of hacking it, I would like to approach it theoretically and from first principles.

To give you an example, just dirty checking might be stopping. If I have 2.000 points, will it replicate that? if I add +10 to each what will happen?
If I filter the 2.000 points by x > 10 and that would also change other visualisations, what will happen?

Well, over here we say, the proof is in the pudding. To answer a few of your questions, Yes, dirty checking will duplicate it. adding +10 to each will hmm, add 10 to each point? Your question probably will be, what happens to performance. Well, that is dependent on how you handle it. adding +10 itself can be done in 1 go, and will take a few Ms (mostly depending on your system!) Have a look at how many times it can be done in a second here

Dirty checking might be a tad slower as that, but it will give you an idea ;)

Regards

Sander