Skip to content(if available)orjump to list(if available)

Ask HN: Dense Tree Layout Algorithms

Ask HN: Dense Tree Layout Algorithms

6 comments

·January 13, 2025

I recently bought a poster which features a really beautiful rendering of a phylogenetic tree of the world's bird families (a rooted binary tree).

https://lynxnaturebooks.com/product/orders-and-families-of-the-birds-of-the-world-poster/

I am sure it was carefully designed by hand. What algorithms could automatically generate a layout like this? The graphviz layout algorithms are poorly suited to the problem because they cannot seem to avoid edge/node coincidence beyond a certain node density.

brudgers

Algorithms can make many types of decisions, but an algorithm cannot make aesthetic decisions. The size of nodes and the size of the boundary are aesthetic decisions as is the ordering of the nodes and so on.

Or to put it another way, you do it by hand when you care and with a computer when you are meeting a specification.

emmanueloga_

For this particular example, I feel like a combination of both human input + algo could work. Something like:

* Have graphviz or some other solver output the [x;y] pairs for each vertex.

* Use the initial positions to create, with a physics engine, a construct where vertices are masses connected by springs following the DAG.

* Add a resizable bounding box constraint around the whole thing.

* Push and pull the boundaries and masses until you get something nice.

What you say still applies: you may want to give the user the ability to resize the masses and re-run the layout algorithm, etc.

maxbond

The choice and design of algorithm can itself be an aesthetic decision. Eg, OP generated some layouts, and spotted something that wasn't to their taste; the edges frequently overlap. So, we might approach the problem like this:

1. Choose an arbitrary algorithm to lay out trees where the edges don't overlap. There's many ways to do this, it doesn't need to be legible at this step.

2. Insert additional nodes along each edge. How many nodes is a tuning parameter we'll need to play with.

3. Use a traditional force-based graph layout algorithm, one that assigns charge to the nodes so that they repel each other. Because we've given the edges some nodes, they will have charge and won't bunch up together.

4. (Optional?) Detect edge overlaps. If they exist, randomize the initial state and try again.

(Note that the algorithm I've described is O(n^2). Patience will be necessary. You can probably refine it further, I only thought about it for a few minutes. Optimizations applied to physics engines (collision detection, gravity simulation) will apply.)

I've dabbled in generative art like this, and if you're willing to do the math and programming and iterate on the design, you can definitely get something of the aesthetic you are after. Bonus, the skills are transferrable to some other kinds of programming, like property testing and graphics.

JohnKemeny

You won't get edge overlaps if you start with a non-crossing drawing. In addition, n² is not very much when you have <100 nodes, as in this case.

Force directed layout algorithms can also be made faster using quad-trees and approximate repulsion.

MattPalmer1086

That's very similar to an algorithm I played with many years ago.

I also used simulated annealing, where a temperature controls the amount of random movement each node gets on an iteration, and the temperature is gradually reduced. It was a DAG though, not a tree.

JohnKemeny

The domain is simply called Graph Drawing. There are no simple algorithm that guarantees some aesthetic outcome, but still, a lot is known in this domain.

To learn more, check out the Graph Drawing conference, or more specifically, their annual contests. Here are a few of the past contests:

* '24 https://mozart.diei.unipg.it/gdcontest/2024/results/

* '23 https://mozart.diei.unipg.it/gdcontest/2023/results/

* '22 https://mozart.diei.unipg.it/gdcontest/contest2022/results.h...

* '21 https://mozart.diei.unipg.it/gdcontest/contest2021/index.php...

* '20 https://mozart.diei.unipg.it/gdcontest/contest2020/results.h...

... and many more via the past contests history page: https://mozart.diei.unipg.it/gdcontest/history/