D3.js: Understanding the Force Layout | Hacker News Reader

D3.js: Understanding the Force Layout

medium.com

32 pointssxywu8 comments

For understanding D3.js Force Layout parameters in really recommend playing with http://dhs.stanford.edu/dh/networks/

Does anyone know of any way to quickly find a steady(ish) state for the force layout? I have a complicated system with around 500 nodes and way more directed connections and the performance of rendering that system on our modest computers is terrible.

A static graph with a sane layout is what I'm after - anyone know of an efficient way to calculate the x and y positions ahead of rendering?

Thanks Obi Wan, you're my only hope.

If you need to re-generate the graph positions on every reload, the static force layout is helpful (http://bl.ocks.org/mbostock/1667139). The code of interest is: force.start(); for (var i = n; i > 0; --i) force.tick(); force.stop(); Where n is the number of iterations you want it to go through. Depending on the complexity of your graph, you may or may not arrive at optimal layout (nodes may overlap), but does calculate and render quickly.

Another key is to update positions of nodes and links only at calculation end, rather than at each tick. This means that user may have to wait a couple seconds before seeing the graph, but will save your browser from having to update the DOM at each tick (which could be thousands of times across thousands of elements).

But the best is still if you don't need to re-calculate the positions (no new nodes ever show up, and no nodes are ever deleted), going with what me_bx said.

You can render the graph once, then store the position of each node/edge. Can be done on the server, or in the browser then export the result if it's only for a one shot.

can anyone mention, recommend, or link to other layout algorithms? (preferably in the less than 1000 node/edge arena, but really any!)

The Force-Atlas2 algorithm [1] has some benefits over the force layout implemented in d3.js, when you want to highlight the communities structure in the graph. A javascript implementation is found in the library sigma.js [2].

Other basic layouts are the circular and random ones [3].

Gephi [4] has a variety of graph algorithms, about 10.

[1] http://journals.plos.org/plosone/article?id=10.1371/journal....

[2] http://sigmajs.org/

[3] http://www.lexmath.com/grafos/sigma/ejemplos/a_plugin_exampl...

[4] http://gephi.org/

Edit: added gephi to the list.

Recommendations from my coworker (https://twitter.com/Amust1987):

Try to read this paper. They mentioned several graph layout algorithms.I think you can also try to ask them the source code. http://www.cs.ubc.ca/labs/imager/tr/2006/Archambault_TopoLay...

Also this paper might be interesting as well. It concludes and categories graph layouts algorithms. Depending what information you want to visualize and what the data looks like, you can pick up different algorithms. http://profs.etsmtl.ca/mmcguffin/research/2012-mcguffin-simp...

Recent discussion of a drop-in force layout module based on a more general constraint-based algorithm (WebCola)

https://news.ycombinator.com/item?id=9840875

Reply on news.ycombinator.com