D3 force layout visualization dead slow when using a large dataset?

Question

I am using d3.js to generate a force-directed layout of my graph consisting of 50K nodes. For anything less than 5K, the library works wonders. I am using the example straight off of the d3.js examples page by changing the reference so that it loads my json file.

Are there any tips to speed up the rendering? If there are any other alternatives, that would be good too.

Answer 1

I doubt you'll find any option that can render 50K nodes in a force-directed layout without slowing to a crawl - most implementations are O(n3), and I don't think D3's is any different.

If offline tools are acceptable, you might check out Gephi, a desktop-based tool that can deal with very large graphs.

Answer 2

For me, it's animation that is very slow when displaying a lot of data via the d3 force-directed graph.

When I need to display a lot of nodes/links, my plan is going to be to remove the animation and have a static force directed diagram. Maybe you can try that? Yes, it's less fun, but once you have a lot of nodes, I don't think the animation is that helpful.

Answer 3

You might want to try GraphGL to visualize large networks on the Web: https://gephi.org/2011/gsoc-mid-term-graphgl-network-visualization-with-webgl/

Answer 4

For more than 1k elements in force layout, consider using canvas instead of svg. It can help with rendering performance. See example here:

https://vida.io/documents/Ye5eGKJrfn3xBmnS3

Answer 5

I know question is old, but anyways.. best for large data is cytoscapejs (http://js.cytoscape.org/). I am working with graph libraries for couple years already and cytoscape is never letting me down.

Currently I am testing visjs, d3v5 and cytoscapejs v3, for really large data (even 100k nodes and 300k edges) for two situations: when I have fixed postitions or not. While d3 is working not bad when there are positions fixed and when force is "turned off" in simulation, cytoscape is working much much better for both situations. This library is using graph algorithms to compute layout, you can apply even your own algorithm for layouting. If you want layout with force you can try springy then.

http://js.cytoscape.org/#layouts