Performance comparisson

anvaka commented 9 years ago

@josdejong I started working on performance suite. It will let users select any graph from the library of graph generators, configure number of nodes and run the demo.

So far I covered our libraries vis and vivagraph. I'm not sure if I've done it in a most optimal way for vis. Could you please take a look?

Grid 10x10

vis vivagraph

Grid 100x10

Warning don't try this on mobile phone. It may kill the browser.

vis vivagraph

Balanced Binary Tree with 4 levels

vis vivagraph

anvaka commented 9 years ago

This is the source code which I'm using: https://github.com/anvaka/graph-drawing-libraries/blob/master/src/src/scripts/examples/almende_vis/02.perf/index.html

josdejong commented 9 years ago

wow, vivagraph really shines here, it stabilizes very fast.

You can indeed easily do some optimizations in the vis.js example. By default, vis.js graphs are configured to "look nice ", but looking nice costs performance ;). A few things:

To immediately see what the network is doing, turn stabilize off (stabilize tries to stabilize the graph before rendering it), option stabilize: false.
Smooth curves is on by default, turning it off with option smoothCurves: false is much faster.
Drawing text is a heavy operation. To make rendering faster, lets make the node labels empty, and lets use the shape 'dot': option nodes: {shape: 'dot'}, node creation: nodes.push({ id: node.id, label: ''});

You can also tune the physics for this specific example, to do this, specify option configurePhysics:true, which will display a menu with sliders for the various variables (see also example 25).

I have committed an updated version of the example: https://github.com/anvaka/graph-drawing-libraries/blob/master/src/src/scripts/examples/almende_vis/02.perf/index.html

anvaka commented 9 years ago

Thank you @josdejong. Very impressive and much faster!

I think moving to WebGL would make vis even faster. Based on profiler canvas drawing api consumes most of the CPU.

josdejong commented 9 years ago

I think moving to WebGL would make vis even faster. Based on profiler canvas drawing api consumes most of the CPU.

Yes, that could be interesting, though WebGL not really handy to render simple text (not sure about the performance). I'm not sure whether this would really make a difference, as most browsers now have hardware acceleration for HTML Canvas too.

anvaka commented 9 years ago

Yeah, webgl is not handy to use indeed. I did some tests in the past. WebGL was several times faster than 2d canvas API.

Here is larger graph comparison:

http://anvaka.github.io/graph-drawing-libraries/examples/anvaka_VivaGraphJS/02.perf/?n=100&m=100 http://anvaka.github.io/graph-drawing-libraries/examples/almende_vis/02.perf/?n=100&m=100

And some more links on Canvas 2d vs WebGL:

http://stackoverflow.com/a/12764907 https://developer.tizen.org/dev-guide/2.2.1/org.tizen.web.appprogramming/html/guide/w3c_guide/graphics_guide/performance_comparison.htm

anvaka commented 9 years ago

BTW I've setup travis now. So every time you push the code it will be automatically deployed to gh-pages :)!

anvaka / graph-drawing-libraries