D3.js: Understanding the Force Layout
medium.com
D3.js: Understanding the Force Layout
1–10 of 10 posts
Re: D3.js: Understanding the Force Layout
#2can anyone mention, recommend, or link to other layout algorithms? (preferably in the less than 1000 node/edge arena, but really any!)
Re: D3.js: Understanding the Force Layout
#3Does 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.
Re: D3.js: Understanding the Force Layout
#4can 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....
[3] http://www.lexmath.com/grafos/sigma/ejemplos/a_plugin_exampl...
Edit: added gephi to the list.
Re: D3.js: Understanding the Force Layout
#5Does 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 o…
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.
Re: D3.js: Understanding the Force Layout
#6Does 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 o…
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.
Re: D3.js: Understanding the Force Layout
#7can anyone mention, recommend, or link to other layout algorithms? (preferably in the less than 1000 node/edge arena, but really any!)
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...
Re: D3.js: Understanding the Force Layout
#8can anyone mention, recommend, or link to other layout algorithms? (preferably in the less than 1000 node/edge arena, but really any!)
Recent discussion of a drop-in force layout module based on a more general constraint-based algorithm (WebCola)
Re: D3.js: Understanding the Force Layout
#9For understanding D3.js Force Layout parameters in really recommend playing with http://dhs.stanford.edu/dh/networks/
Re: D3.js: Understanding the Force Layout
#10Does 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 o…
[deleted]