Is VivaGraphJS still the fastest?

[alexburner]

The readme links to this video as proof of speed.

But @anvaka I notice you have a comment in the video saying that the new d3-force may be faster:

Here is the code: https://github.com/anvaka/graph-drawing-libraries/blob/master/src/src/scripts/examples/mbostock_d3/02.perf/index.html - it is very old, and uses svg. I think d3-force module from v4 of d3 is much faster now, and beats vivagraph at convergence speed with specific parameters. I'm going to update this video when I find time for it...

What is the current state of truth for relative force-layout algorithm speeds?

[anvaka]

That's a good question! I haven't got time yet to re-measure it, but I removed the note from the readme file. Will keep this issue open to measure once I have time. Hopefully later this month.

[alexburner]

Thanks for the fast response! I'm looking forward to the results, good luck

[josephrocca]

Here's a simple random graph with vivagraph: http://jsbin.com/pelacomibu/1/edit?html,output I'm doubtful that d3 could match that sort of performance. I can get 10000 nodes and 10000 edges to run in real-time on my old laptop. Would be cool if someone could duplicate my example on d3 (using webgl renderer if it has one? svg will obviously not cut it). Looking forward to the test results in any case! Edit: And just for lols, 50000 nodes runs at a reasonable speed too. Maybe even rendering is becoming a bottleneck at this point? I have no idea:

[alexburner]

Very cool @josephrocca, thank you!

That's pretty convincing... I've got a similar-but-different d3-force test here: 5000 nodes: http://patterns.website/experiments/workers/force-layout/2nd--drag/dragging.html#5000 10000 nodes: http://patterns.website/experiments/workers/force-layout/2nd--drag/dragging.html#10000

And it looks like VivaGraphJS beats it handily, my test is already starting to chug at 5000 nodes & edges.

But my test has differences:

• Advantage: layout calculations happen in a web worker (separate thread from rendering)
• Disadvantage: rendering uses a simple canvas (better than SVG, but not WebGL)
• Uncertain: nodes and links are connected differently (based on an example here)

I wish I could quickly test VivaGraphJS on a simple canvas, but it looks like the only options are SVG and WebGL for the graphics module. I'm going to look more into the particular requirements for my next project (mainly: can we require WebGL support of our customers?)

Either which way, your test has encouraged me, and when I have time I'll try to run a more normalized side-by-side comparison between the two libraries (either both in canvas or both in webgl).

[alexburner]

It was just pointed out to me that the underlying VivaGraphJS layout algorithm lives on its own as ngraph, this will make it much easier to create a normalized renderer and test ngraph directly against d3-force

[anvaka]

By the way, you can use d3-force with vivagraph. Here is a basic demo: http://anvaka.github.io/VivaGraphJS/demos/other/d3layout/

Source code - https://github.com/anvaka/VivaGraphJS/blob/master/demos/other/d3layout/index.js

[khawarizmus]

so what is the conclusion so far on this issue? who is the fastest ?

[anvaka]

No conclusion yet.

I've built this little toy: https://anvaka.github.io/share/wgl/ - it allows you to switch between ngraph/d3 layouts. Both are rendered with webgl

The graph is currently hardcoded, it has ~900 nodes, ~5k edges.

I like how d3 gets good initial positions very fast, but subjectively I like layouts produced by ngraph better. I might be missing something critical in d3's arguments to make it look nicer - if you have suggestions how to improve it - please let me know.

Here are the settings that I'm using for d3 layout: https://github.com/anvaka/playground/blob/4b717e6ee2d1b6b0dd869ba90d907a81b5966fe1/v-debug/src/lib/makeLayout.js#L53-L65

[khawarizmus]

of finally it's been some time that i was waiting for your reply i have asked few questions in many of your repos.. I would like to be in contact with you as i need some help @anvaka