
Algorithm for Drawing Trees - mfbx9da4
https://rachel53461.wordpress.com/2014/04/20/algorithm-for-drawing-trees/
======
slavik81
> I recently wanted to take a hierarchy of items and draw them in a nice tree
> structure. For example, a Family Tree.

In general, a family tree is a directed acyclic graph. Branches of the tree
will always join back together if you follow the history far enough.

The number of ancestors in a generation is 2^N, with N being the number of
generations back you're looking. There were only 100 billion people that ever
lived, so by the time you get about a thousand years back, it becomes
literally impossible for all your ancestors to appear only once.

Of course, that's just an easy upper bound to make the point that becoming a
graph is unavoidable. In practice, branches will come together a lot sooner
than that.

~~~
erdeszt
Is it always acyclic though?
[https://stackoverflow.com/questions/6163683/cycles-in-
family...](https://stackoverflow.com/questions/6163683/cycles-in-family-tree-
software)

~~~
slavik81
Yes. You cannot be your own ancestor. A graph pointing from child to parent
can split and merge, but never loop.

Though, you may need a cyclic directed graph for fictional family trees and
time travel paradoxes.

~~~
rhn_mk1
A family tree is an overloaded term. The tree of ancestry, which describes who
beget whom, sure cannot be cyclical.

The graph of civil relationships can certainly contain cycles. If the
relationship in question is "is a legal parent of", for example, then adopt
your parent.

The opportunities for cycles multiply if both blood and legal relationships
are taken into account.

~~~
lidHanteyk
So don't mix those two things, then; keep them distinct. Work to preserve the
acyclic property, rather than trying to toss new concepts in.

~~~
rhn_mk1
This works only until the concepts are the reason the problem is being
tackled. A family tree based only on genetic relationships is interesting to
few people outside geneticists and doctors. Most people are interested in
familial ties as they are culturally defined.

------
anigbrowl
It's a source of ongoing perplexity to me that so many Linux file managers
don't even offer a tree view, never mind some of the more advanced
possibilities. Consider Robertson's work on Cone Trees from Xerox Parc
in....1991.

[https://research.tableau.com/sites/default/files/p189-robert...](https://research.tableau.com/sites/default/files/p189-robertson.pdf)

and variants thereof at [https://infovis-
wiki.net/wiki/Cone_Trees](https://infovis-wiki.net/wiki/Cone_Trees)

Oddly, there has been some work done on _source code_ trees such as Gource,
but for some reason nobody has yet thought of applying this to file systems or
browser navigation paths.

[https://gource.io/](https://gource.io/)

~~~
j88439h84
There's [https://dystroy.org/broot/](https://dystroy.org/broot/)

Are those fancy tree displays actually useful for anything or is just pretty?

~~~
anigbrowl
That's for console use. Trees are useful for looking at the whole thing at
once, much as it's easier to appreciate a real tree that way than by
maintaining a list of the leaves and branching distances.

I'm a a researcher and my source material is ~50gb spread across ~50k hand-
picked files with pretty arbitrary structure, plus another 4-5 times that in
mirrors of other collections. Trees let me _see_ things that I would overlook
by _reading_ lists all the time.

Right now I half-ass use some bioinformatics tools originally intended for
cladistics and proteome research to visualize the collection. Some days I go
looking for specific information or catalog what I have, other days I stumble
across a cache of valuable data and might select hundreds of individual files.

~~~
j88439h84
I'm having trouble imagining this. Would you be able to show a screenshot?

~~~
anigbrowl
I use a piece of software called Dendroscope to kick out circular cladograms,
as documented here: [https://software-ab.informatik.uni-
tuebingen.de/download/den...](https://software-ab.informatik.uni-
tuebingen.de/download/dendroscope/manual.pdf)

It works OK, but it means directory listings first have to be kicked into a
Newick tree format:
[https://en.wikipedia.org/wiki/Newick_format](https://en.wikipedia.org/wiki/Newick_format)

I use a variety of other graph-based tools too, such as Maltego, Gephi, and
Cytoscape, but to be honest I do so in a very ad-hoc way for specific tranches
of data ( afile collection, or a relevant social media stream) and keep most
of it my head. Otherwise I will get hung up on tooling rather than the
underlying material.

------
tejtm
Was thinking was going to get some nice L-system eye candy [0]
[https://en.wikipedia.org/wiki/L-system](https://en.wikipedia.org/wiki/L-system)

------
virtuous_signal
So the author mentions hearing about the Reingold-Tilford Algorithm which
wouldn't work for the example given since R-T is meant for binary trees and a
family tree might have more than 2 nodes.

Which led me to wonder why is there even an "algorithm" per se for binary
trees: wouldn't it be acceptable to just trace out a complete binary tree with
spaces reserved for each potential node, and only fill in a space with a node
if it is non-null? Or does this not meet some criterion of "niceness" for
drawings?

~~~
captncraig
If you do that, you quickly run into the feasible depth limit for what you can
show in a fixed space. Especially for sparse trees. Consider something like
family trees, where you generally don't know anything about certain lines, but
may have 20 generations or more on selected lines. No way could you show 2^20
nodes in a fixed format rendering, but you can make something kinda pretty by
eliminating the empty space and organizing things to fill it intelligently.

~~~
taywrobel
I was _just_ writing a radial RT-like visualization for displaying the
branching structure of a binary tree and ran into the issue of information
density you describe. Still pretty happy with the results, tho, in how it
shows the structure and clustering.

And I colored it like a tree, just for fun -
[https://giphy.com/gifs/TKFUkrWQtil60Ij2YJ/html5](https://giphy.com/gifs/TKFUkrWQtil60Ij2YJ/html5)

------
Drup
I'm surprised they chose that algorithm, it's fairly limited and not that
efficient.

If your nodes have width, you should read "Improving Walker's Algorithm to Run
in Linear Time" (I have an implementation here:
[https://github.com/Drup/tree_layout](https://github.com/Drup/tree_layout))

If your nodes have width _and_ height, you need to read "Drawing Non-layered
Tidy Trees in Linear Time"

If you want to go bananas visualizing n-ary trees:
[https://treevis.net/](https://treevis.net/) :D

------
HatchedLake721
I implemented something similar at
[https://automations.io](https://automations.io) converting a workflow stored
as a flat linked list to a tree structure and then traversing and rendering it
out in HTML and sprinkling CSS on top

------
michaeltoth
I was expecting a generative art algorithm for drawing trees

------
sprt
This is interesting, I was asked this question in an interview for a Microsoft
internship, but for a binary tree.

------
javieranton
I implemented this in this app iOS:
[https://apps.apple.com/us/app/collaborative-
groups/id1478800...](https://apps.apple.com/us/app/collaborative-
groups/id1478800849?ls=1) Android:
[https://play.google.com/store/apps/details?id=com.groups.net...](https://play.google.com/store/apps/details?id=com.groups.network)
Which also has some nice features like sharing your tree with others and
working together on them

------
xorand
Some trivial mathematical facts. No matter what algorithm you use, you want to
make a quasiisometrical embedding of a tree into a finite dimensional space.
Or, for a tree the no of nodes at distance R from the root is like exp R, but
in any space of dimension N you can cram about R^N points which are at
distance R from the origin. Hence the problem.

But you can embedd any tree into the Hilbert space :)

------
tunesmith
There are the various graph layout algorithms I've heard of, Sugiyama, KIELER,
ELK - these can be used for trees of course, although I'm not sure they have
highly constrained vertical levels like the article depicts.

~~~
ygra
Sugiyama has layers and can be used for trees just as well (and may give nicer
results for almost-trees than removing non-tree edges and routing them
individually). KIELER and ELK seem to be collections of various layout
algorithms, including Sugiyama and specialized tree layout algorithms (same
with our own library yFiles).

------
winrid
Sebastian Lague did a video that includes some tree generation that was fun to
watch

EDIT wrong kind of tree :D

[https://youtu.be/\--GB9qyZJqg](https://youtu.be/--GB9qyZJqg)

------
jmiskovic
Nice write-up. I enjoyed how the material was presented - the introduction to
problem, intuitive summary method and then detailed steps with visualizations
of partial results.

------
billfruit
I remember Robert Sedgewick's listed a really simple method for drawing trees
in his book, only it drew them sideways.

