Is D3.js the right choice for real-time visualization of Neo4j Graph DB data

jhanna0188 picture jhanna0188 · Feb 14, 2013 · Viewed 22.5k times · Source

I am a CS Research student at UW, and my group is at the point of trying to visualize specific network traffic that is put into a neo4j graph DB in real time.

I have read about many different tools such as gephi, cytoscape, rickshaw (based on D3.js), some others, and D3.js.

We are so far going forward with D3.js, but wanted to get the community opinion. We can't use cytoscape because of neo4j, and feel that D3.js would work the best with semi-large data in a fast real-time environment.

Suggestions?

Perhaps for another question, but also feel free to input: Best way to implement neo4j? Java, Ruby, node.js?

Thank you!

Answer

MarcoL picture MarcoL · May 7, 2014

There's not a silver bullet solution for this kind of problem and most depends from what you have in mind to do, the team and the budget (of money and time) you have.

I wouldn't recommend you D3, unless you have to met one of the following:

  • you want to create a brand new way to visualize your data
  • you have skilled people in your team - that can be you - with D3
  • you have already other D3 widgets/viz to integrate

If you don't met any of the entries above I would put D3 on a side, and tell you to have a look at:

  • SigmaJS, Open Source and free Javascript library.
  • KeyLines, Commercial Javascript Toolkit.
  • VivaGraphJS, Open Source and free JS library.

Disclaimer: I'm one of the KeyLines developers.

Depending on the size of the data you have, the choice of the library can change: if you plan to have no more than 3/400 nodes on your chart and not need particular styling/animations then SigmaJS I think is more than fine; if you're looking for something more advanced for styling or animation I would recommend KeyLines, because it is designed to handle this kind of situations (providing an incremental layout) and it does scale up to 2000 nodes with no problems - although I might suggest to have a filter on a side with this size.

I would name VivaGraph as last resort: SigmaJS has a WebGL renderer as well and provide a much nicer rendering IMHO.
VivaGraphJS will be soon replaced with ngraph that will use an agnostic aproach for renders: you can use PIXI, Fabric or whatever you want....

Using a WebGL renderer makes sense when you load your assets once and reuse them all the time: if you're styling your chart elements in a real-time scenario there's not advantage on Canvas IMHO.