Combining vertical and horizontal layout in organization charts

[godiagonal]

I'm working on product where one of the core features is to visualize organization charts for large organizations (>1000 employees). The depth of the tree structure ranges from around 2-5 levels, meaning a traditional vertical tree (see image below) would end up very wide.

A common arrangement for organization chart design is a combined horizontal/vertical layout, as this makes more efficient use of the available space. In this layout, all non-leaf nodes are arranged in horizontal rows (bottom-to-top) and leaf nodes are arranged in vertical columns (left-to-bottom).

Ideally, this is the layout strategy I would like to implement. What I'm looking for is essentially the possibility to change the layout direction for certain nodes in the tree. How would I best go about doing this? Is this feasible using React Flow and any of the recommended layout libraries?

[chrtze]

Hey @godiagonal! I think this is a tough problem to achieve with a layouting library. Maybe it's possible for you to handle the placement of the sub nodes yourself? We found that it's often times easier to do the general layout with a library and then do some adaptions. Alternatively, I tried to reproduce your problem using ELKjs. Maybe this can be a starting point to configure your layout.

You can check it out by pasting this markup into the elkjs playground:

elk.direction: DOWN
nodePlacement.strategy: NETWORK_SIMPLEX

node n1
node n2
node n3 {
    portConstraints: FIXED_SIDE
    elk.direction: RIGHT
    
    port a1 {
        ^port.side: NORTH
    }

    node n6
    node n7
    node n8

    edge n3.a1 -> n8
    edge n3.a1 -> n7
    edge n3.a1 -> n6
}
node n4
edge n1 -> n2
edge n1 -> n3.a1
edge n1 -> n4```

[godiagonal]

Thanks for the quick response @chrtze! Handling sub node placement separately sounds like a good approach. I was toying with the idea of splitting the graph into multiple individually layouted sub graphs that could be merged. In my case sub node layout is simple and predictable so it might makes sense to layout them manually. I will dig a bit deeper into elkjs with your example as a starting point. 👍