R2D3 should fork Raphael and create an optimized version.
Yeah, I haven't really profiled any intense visualizations to know what's slowing them down, but I do know that visualizations with lots of nodes tend to have problems rendering.
You can see performance results here: http://jsperf.com/clonenode-vs-createelement-performance/2
There isn't much, if anything, to gain for modern browsers but IE gets a big perf boost.
can you tell me about when you want to improve the performance? Actually I'm working on a population Pyramid and everytime I get a run-time error in cause of the performance.
After this I want to upload an example of this pyramid ;)
yup, I can try to get it done this week.
this would be very cool :)
I pushed an optimization to the elements created by R2D3. I still need to optimize the elements created by Raphael, but this might help your visualization a bit.
I tried it and i get this error
Illegal argument. r2d3.v2.js, line 9725 character 5
Crap, there is an issue with IE and cloneNode where it incorrectly clones unknown elements (e.g. SVG elements). I might have to back out that change. It was passing on my tests, but looks like I missed a use case.
I've logged another issue that should give a pretty big perf boost for large visualizations. Basically supporting CSS styling is very expensive, so if I make it optional you should get a speed boost. The caveat to this is you will have to manually style everything via selection.style or selection.attr.
oh ok.. thats really stupid!
Do you think, that you can fix this use case?
Thats cool and no problem! At this moment I manually style the most d3 diagrams and only a few with a CSS file. So I can quickly test it and give feedback, if you have completed the issue ;)
Can you put your sourcecode for the failing case in a gist?
sure, I will make an example
here you can find the example of the pyramid (I have reduced it a little bit)
not nice, but I think at the moment enough to find the bug ;)
you will see, that the first left half of the pyramid is missing
I commented on your gist. Looks like I need to make CSS support for visualizations opt-out
ok, I will consider your points in my code ;)
if this would give us a performance boost this would be very cool! Actually this is my last problem to get this pyramid into my application ;)
Cool, we'll get there :)
Yeah, I think so :)
I tried everything you mentioned, if you can fix the css problem, that would be a great improvement for me! When this is fixed, we can switch all our Graphs to r2d3 :) THX in advance
I'm actively trying to refactor R2D3 to squeeze out every last performance improvement I can. My estimate is this will take a week. You can folllow my progress in the refactor branch
@alexstatmath You might want to try out your pyramid on the refactor branch I have going. Your example seems to load without any issues. You can find it in the examples folder.
FYI, I'm not finished with the branch yet, but getting VERY close.
yeah I get no error message anymore! Thats awesome :)
but it seems as if the mousover and mousedown functions no longer work. Is this a TODO in your branch or maybe a bug on my side?
Thanks a lot ;)
TODO in my branch... I basically rewrote R2D3 from the ground up so I have to re-implement everything.
wooow ok. Really good work, the performance seems to be a lot faster than before :) Even the positions of some labels are better than before.
@alexstatmath I created a pull request for the refactor branch. I think I have the event code fixed. You can check it out here #81. This branch appears to be faster and more stable than master, but I want to fix a few remaining issues before I merge in. Feel free to play around with it and let me know what you think.
i tried your new version and i got this bug:
(translation: The precision is out of range, line 8363)
I merged the new version of R2D3. Can you log the precision issue as a new bug and I'll look into it? Please also post the value that was set to trigger the error.