Family Tree Visualizer help

[Ashmoudai]

I’m creating a family tree visualizer UI and I’m struggling to position every “card” (person) correctly in a way that accounts for the whole tree and prevents overlap & confusion.

This is the sort of thing I’m trying to get:

But all I can achieve is:

The people in the tree are sorted into a table of “person” objects that contain their age and their parent. I’m not trying to simulate two parents, just the primary parent of the dynasty (last name).

I’ve attempted to sort the tree into “levels” but I can’t wrap my head around the positioning. If anyone could give me a hand or any other examples that would be great.

[azqjanna]

You need to calculate how much space each card needs below it. To do that you can look down the tree and find the widest level that is a descendant of that card:

Once you do this for every card, they will each have a “required width” which you can then use to choose their X position.

You can choose to center each card in it’s width slot, or do something else to choose the final X, depending on how you want it to look.

[Ashmoudai]

That’s a good way of thinking about it. Thanks