CODEWITHSUNDEEP
javascriptperformanced3.jsforce-layout
Legend
Legend

Reputation: 116810

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

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.

Upvotes: 18

Views: 15315

Answers (5)

banabella
banabella

Reputation: 39

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

Upvotes: 2

Phuoc Do
Phuoc Do

Reputation: 1344

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

Upvotes: 2

anish
anish

Reputation: 131

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.

Upvotes: 6

Seb
Seb

Reputation: 618

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/

Upvotes: 4

nrabinowitz
nrabinowitz

Reputation: 55688

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.

Upvotes: 12

Related Questions