by James Mulholland @ 10:44 am 11 May 2011

geneHackman (no relation)

Created using Processing, geneHackman is a radial visualization for genealogical data. Individuals, represented as nodes, are placed a distance from the center relative to the year they were born, with 2000 at the center moving backward in time as they move outward. The paternal lines are traced in darker green; the maternal lines are traced in lighter green. The software reads common GEDCOM files to generate the relationships.

About the Project

I previously developed a version of the family tree program (found here) but the interaction was incomplete and I didn’t make the information particularly clear. After diving back into it I found few errors in the parsing code that prevented many key people from being drawn. In the new version I accounted for longer data entries so that a full person is created.

Conceptually, my original had a problem as well. the up/down tree structure just couldn’t work at the level I wanted it to, even after I drew only the main lines, skipping the siblings (at least for now). To be able to understand the family network a little better, I developed the circle rendering to view the entire lineage cleanly and all at once.

However, since my rendering accounts for specific years born the information shown is more dense than the example. Once parsing the data, the code takes another pass at each person and calculates age from birth- and death-dates or estimates the age if one is not already calculated.

Video Demo


Currently the controls are a little crude, but they are mostly to explore the diagram as a designer, and not as a user.

z – zoom out
x – zoom in
0 – re-center on middle
left/right/up/down arrows – pan around


There are few resources to render family heritage in traditional tree structures. GEDCOM is a common program to manage genealogy data. There are a few others that offer to render the family tree (even in 3D), but no software currently shows the entire tree in a way that allows a full view of the family over the entire 1000 year span.

The divided circle angles was inspired by a handful of family tree images from poster companies.

Artistically, I found inspiration in star-finder maps that help to identify constellations.

Regarding color choice, there is little meaning in the color itself other than identifying gender: male (dark green) and female (lighter green).


The primary challenge of drawing the relationships is to show each connection, without letting the connections overlap each other (at least, without some form of extra ). Overlapping paths cause confusion and prevent the user from seeing true relationships. To make sure there were no overlaps, I calculated the angle of spread for each person by dividing the angle of the child by two. The calculation relies on knowing the number of generations from the person in the center. The angle calculation looks like this:

Angle = 180 / ( 2 ^ (GEN-1) )

So the strength of this is that it is mathematically impossible for one child-parent relationship line to cross with another (but does not account for incest which would provide a crossover. The drawback is obvious: by the time you get more than 7 or 8 generations out, the density on screen becomes too intense to make sense.


Like many coding projects I spent hours going down rabbit holes that didn’t get me anywhere. I feel the efforts paid off though and the key features to navigate and understand the diagram are in place. A handful of bugs regarding color rendering are still in place and hope to fix them soon. The code does work on other GEDCOM files, but takes some tweaking. The code is customized for my own dataset, but down the line I hope to have plug-in-play capability with other data files.

Unfortunately, there are still problems in the data itself (I believe there are multiples of one person linked as a father to himself!) but the nice thing is that my navigation makes these errors apparent.

I would like to add more functionality soon including extra controls via controlP5 library to adjust parameters more easily. A filter-like search feature would be interesting but requires broader reflection on the overall functionality and interaction.

Future versions could allow more accurate zooming and more sophisticated line drawing using bezier curves (my first attempts were way off!). Since there are a couple historic figures in the tree, it might be nice to pull from wikipedia if data is available.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2017 Interactive Art & Computational Design / Spring 2011 | powered by WordPress with Barecity