3

Here are two different ways of drawing the same hierarchy. Notice that in the "stacked" layout, nodes are always one layer higher than their highest "child" node. (Important: See edit at bottom of question for another example)

two different ways of visualising the same graph

Do these two types of layered drawing methods have specific names? I'm trying to find existing algorithms for the "stacked" one, but can't seem to surface any info because I don't know what it's called.

If they don't have names to distinguish them because they rely on the same algorithm, are there well known sets of parameters for attaining the "stacked" version of the graph with existing algorithms? Thanks!

Edit: Although the above graphs are strict "trees", the algorithm I'm looking for should be able to handle cases where nodes have more than one parent, and cases where there is more than one path from root to leaf. Here's an example, and here's another.

Edit2: In case it's useful to anyone, a hacky (and slow) force-directed approach with pre-computed node layers (y-axis contraints) seems to work all right. Here's what it looks like. That example uses cytoscape.js and cola.js, and it's upside down. It's not at all a solution to this question so I'm just putting this here as an edit.

(SO wouldn't let me submit the JSBin link without a code block...)
  • If I understand it correctly, on the left the y position of each node depends on the *maximum* depth of any child node? So that leaf nodes by definition have y=0? That's basically your algorithm. – MSalters Aug 20 '17 at 15:29
  • Yeah, exactly. Both have very simple rules for node depth - they're sort of opposites in that one anchors the leaf nodes, the other anchors the root node(s). I imagine the logic for minimising crossings would be a bit different, but I haven't thought too hard about it since I'm hoping/assuming there are a bunch of implementations already out there for me to use. –  Aug 20 '17 at 16:15
  • Crossings? A tree is a planar graph. Has to be, it's acyclic. Thus, zero crossings. Trivially: any finite tree has an upper limit N of children per node, and a finite depth D. Hence, each tree is a subset of the full N-ary tree of depth D, which is easily drawn without crossings. – MSalters Aug 20 '17 at 22:22
  • Ah, looks like I've accidentally drawn a special case. This is not my field, but I think I'm looking for a more general "DAG" algorithm rather than one for strict trees. [Here's an example](http://i.imgur.com/hWCoWF8.png) of another graph it should be able to handle (I'll update the question). I'd be mildly surprised if I had to write my own cytoscape extension for this stacked layout, but perhaps it is as rare as it seemed from my initial searching. –  Aug 21 '17 at 01:33

1 Answers1

1

I don't know of any specific names for the above. It looks like the layering algorithm in both cases is the longest path algorithm that minimizes height but essentially ignores width. If you layer the graph from the bottom-up and the graph has many sinks (vertices with zero out-degree) then you will get a wide bottom layer (a "stacked" layout?). If you layer the graph from the top-down and it has many sources (vertices with zero in-degree) then you will get a wide top layer (a "hanging" layout?).

Martin Harrigan
  • 1,044
  • 11
  • 28