4 ms·

D3.js: Understanding the Force Layout

32 points by sxywu 11y ago

pyvpx 11y ago
can anyone mention, recommend, or link to other layout algorithms? (preferably in the less than 1000 node/edge arena, but really any!)
- me_bx 11y ago
  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.pone.0098679 http://journals.plos.org/plosone/article?id=10.1371/journal.... [2] http://sigmajs.org/ http://sigmajs.org/ [3] http://www.lexmath.com/grafos/sigma/ejemplos/a_plugin_example.html http://www.lexmath.com/grafos/sigma/ejemplos/a_plugin_exampl... [4] http://gephi.org/ http://gephi.org/ Edit: added gephi to the list.
- sxywu 11y ago
  Recommendations from my coworker (https://twitter.com/Amust1987 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_TopoLayout_TVCG/TVCG-0215-1205.R1-TopoLayout.pdf 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-simpleNetVis/mcguffin-2012-simpleNetVis.pdf http://profs.etsmtl.ca/mmcguffin/research/2012-mcguffin-simp...
- irickt 11y ago
  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 https://news.ycombinator.com/item?id=9840875
pachydermic 11y ago
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.
- me_bx 11y ago
  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.
- sxywu 11y ago
  If you need to re-generate the graph positions on every reload, the static force layout is helpful (http://bl.ocks.org/mbostock/1667139 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.
- deleted 11y ago
  [deleted]
stared 11y ago
For understanding D3.js Force Layout parameters in really recommend playing with http://dhs.stanford.edu/dh/networks/ http://dhs.stanford.edu/dh/networks/

32 points by sxywu 11y ago

pyvpx 11y ago

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

me_bx 11y ago
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.pone.0098679 http://journals.plos.org/plosone/article?id=10.1371/journal.... [2] http://sigmajs.org/ http://sigmajs.org/ [3] http://www.lexmath.com/grafos/sigma/ejemplos/a_plugin_example.html http://www.lexmath.com/grafos/sigma/ejemplos/a_plugin_exampl... [4] http://gephi.org/ http://gephi.org/ Edit: added gephi to the list.
sxywu 11y ago
Recommendations from my coworker (https://twitter.com/Amust1987 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_TopoLayout_TVCG/TVCG-0215-1205.R1-TopoLayout.pdf 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-simpleNetVis/mcguffin-2012-simpleNetVis.pdf http://profs.etsmtl.ca/mmcguffin/research/2012-mcguffin-simp...
irickt 11y ago
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 https://news.ycombinator.com/item?id=9840875

pachydermic 11y ago

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.

me_bx 11y ago
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.
sxywu 11y ago
If you need to re-generate the graph positions on every reload, the static force layout is helpful (http://bl.ocks.org/mbostock/1667139 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.
deleted 11y ago
[deleted]

stared 11y ago

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