search

MicrosoftTCE / civic-graph-node

Civic Graph - Visualization Tool -
http://civicgraph.io
3 stars 0 forks source link

Performance issues #24

Open ajb opened 9 years ago

ajb commented 9 years ago

The site is pretty un-performant, which seems to be due to some aspect of d3:

img

Just flagging this as a potential issue, especially as data continues to be added.

johnpaulfarmer commented 9 years ago

Thanks, Adam! Recommendations?

ajb commented 9 years ago

Unfortunately I've never really used D3. Maybe someone with some experience there can chime in.

On Sun, Feb 22, 2015 at 11:04 AM, John Paul Farmer <notifications@github.com

wrote:

Thanks, Adam! Recommendations?

— Reply to this email directly or view it on GitHub https://github.com/microsoftny/athena-civic/issues/24#issuecomment-75442203 .

Adam Becker (951) 9-BECKER @AdamJacobBecker

johnpaulfarmer commented 9 years ago

@TSiege @luisdaniel @rypan Any suggestions for how to improve D3 performance?

luisdaniel commented 9 years ago

It's the force-directed graph. D3 takes all the nodes and draws them on the canvas randomly, then it has a "force" function which rearranges them on the canvas. What Ken has done is placed that "force" function inside of a while loop, which only exits until all nodes have been positioned (but not drawn yet), once it exits that while loop, then the nodes are drawn on the canvas. Thanks to the while loop, the graph is drawn way faster. However, D3 still has to go through this process.

I'm not sure how to speed this up even more. Ken's solution is the best I've seen so far.

I've heard D3 doesn't scale so well with nodes after 500 or so. So perhaps once you get there and start seeing more performance issues, it might be time to figure some other solution. Like loading some of the nodes, instead of all.

What you can also do, and I recommend, is add a spinny "loading" wheel while the graph displays. That way the user expects something is loading. The graph loads in less than two seconds, so the user will be "whoa, that was fast, I guess".

kenchandev commented 9 years ago

I definitely agree that generating the initial DOM structure for the force-directed graph visualization can be a bit "hefty" given a large amount of data.

I have looked into this issue, and I have decided that rendering the visualization on the server-side via the d3 and jsdom npm modules would improve the performance of the web application. I will be working on this shortly after other issues have been resolved.