To display a family tree in a user friendly format is not a trivial task but becomes manageable if broken down into stages as follows:
- Retrieving the data. Generally this is straight forward since the data is often stored in a database or a GEDCOM format file.
- Deciding on the information to be displayed for each individual. This is a personal choice but minimally includes the individual's
name and dates of birth and death.
- Deciding on which individuals to display. Conventionally a family tree displays only blood relatives and not marital relatives other than
- Positioning the individuals for display. This positioning must reflect the relationships between the individuals, for example it is
common practice to centre-align parents over their children.
- Display the family tree. Decide on the method to be used to display the tree.
- Viewing the tree. Family trees can be very large and method is required to traverse the tree using the limited screen area
My approach to each of these stages is discussed below
Starting with the individual for which the family tree is to be displayed the database is queried to retrieve the ancestors of the focus individual
generation by generation for a defined number of generations. Typically three or four ancestor generations are retrieved. The ancestors retrieved are
limited to those that are direct (blood) relatives of the individual.
To simplify the positioning of the ancestors for display purposes a simple convention can be adopted regarding the sequence of the ancestors within
a particular generation. For my application I adopted the convention:
- Fathers/Husbands are always displayed on the left and mothers/wives on the right.
- Parents of fathers/husbands are always to the left of the parents of mothers/wives.
The ancestors retrieved using this methodology is sufficient for a Pedigree display however, further data is required for a Family tree display.
For a Family tree display the ancestors are expanded to include the siblings and their spouses of each ancestor. Again, to simplify the subsequent
positioning a simple convention is adopted for the sequence in which these siblings and spouses are added to the ancestors.
- Siblings of fathers are always added to the left of the father such that the direct male ancestor is always the
- Similarly, siblings of mothers are always added to the right of the mother such that the direct female ancestor is always the
- The spouses of siblings are added in a sequence that preserves the above convention for the sequencing of husbands and wives
The ancestors are further expanded to include their descendents using the same conventions for the sequence of individuals. However, for
most family trees this expansion to include all ancestors and their descendents results in very large trees which are difficult to navigate.
To keep the tree manageable descendants are only added below a specific generation level, usually the level of the grandparent of the individual.
Finally descendents are added starting from the generation level of the individual and, as before, are limited to a specific number of generations
to avoid overly large trees. Typically two generation levels of descendants are added i.e down to the grandchildren of the focus individual. The end
result is typically seven generations of family tree ranging from the great grandparents of the focus individual down to the grandchildren of that
individual with all of the members of the tree in a particular generation arranged in a sequence determined by the above conventions.
Positioning of individuals
The positioning of the individuals (nodes) to form a tree involves the assignment of X and Y values to define the left-right and up-down locations of
the nodes such that:
- The nodes do not overlap
- The relationship between nodes is clearly visible.
- As far as is practicable/feasible child nodes are centered below their parents.
- White space is minimised to provide optimal utilisation of the available display area.
For Pedigree trees this positioning is trival since we know berforehand how many nodes there will be at each generation level (2l where
l is the generation level assuming the focus individual is at level 0). If the tree is to be displayed horizontally with the focus individual on the left,
which seems to be the most commonly used Pedigree layout, then we need only determine the size and spacing of the nodes of the rightmost level such that they
fit within the available display area. For the other generation levels the node size may be kept constant and the spacing doubled between each generation level.
This simple approach generates a usable Pedigree tree but is wasteful in that there are large areas of white space.
Ancestry.com address this isuing by changing the relative sizes of the nodes between levels and inter-weaving the nodes at lower generation levels by
overlapping the X position values.
Family trees present significant difficulties regarding the positioning of the nodes. An internet search of algorithms for tree nodes positioning identified
a very useful publication by Walker II, J. Q., "A Node-Positioning
available at The CodeProject.[note: it is worth scrolling
presented there by Kevin Dorff]
designed for "... directed trees, that is, trees with one root and hierarchical connections from the root to its offspring. No node may have more than one parent."
The requirement for a node to have only one parent proved to be the main stumbling block
However, through working with Walker's algorithm, I realised that, if the data for the nodes is collected using the conventions described above, then the order
of the nodes at each generation level is established during data collection and the only positioning requirement is the determination of the horizontal
position of the node since the vertical positions are determined by the fact that all nodes within a particular generation must be at the same vertical
position. To position the nodes horizontally a multi-pass algorithm is used as follows:
- The first pass "ReverseWalk" walks through all nodes from the lowest decendant generation to the highest ancester generation aligning the parents
over the centre of their children.
- The second pass "ForwardWalk" walks through the tree from the generation level at which the decendants are added
aligning the midpoint of the children below the parents.
- The third pass is a repeat of the first pass to minimise excess white space resulting from the second pass
- The final step is to correct the X positions of all the nodes to remove any white space to the left or right of the tree.
The algorithm provides an acceptable result but still requires some improvement, notably to correct the fact that married couples are aligned more towards the
husband's parents as opposed to being centered between the parents of the husband and the wife.
Displaying the tree
Now that we have all the tree data and position co-ordinates of all the nodes all we now need is a methodology to display the tree.
There are several possible ways of displaying trees including canvas drawing, table structure base, css styling, flash or image. Bearing in mind that the
tree itself must be interactive I initially focussed on a CSS styling approach. This approach is based on the use of ordered lists with CSS styling
to produce the connectors. I found a very simple example of this from CSSCreations which I then modified based on the CSS scripts used by the
Gingell Family Tree. A demonstration of the method is given
The Gingell Family Tree has resolved the issue of how to deal with spouses by placing the spouse in a
descendent position a link being shown by an & character (I have elected to use a || symbol in the
Unfortunately, whilst the use of nested ordered list styled by CSS is an elegant method of displaying a family tree it does have several drawbacks
- The method only works effectively when showing descendents.
- The tree only shows the ancestors of one spouse whereas, if you were the target individual, you would expect to see your descendents and
your parents and grand parents as shown below. However, only the parts outlined in red in this image will be shown using this method.
- Because spouses are placed in the position of a descendent an additional generation layer is introduced as shown in the
example with the result that the individuals at the bottom of the tree are shown as being three generations removed from their grandparents
instead of two.
I initially tried to modify the CSS styling of the family tree to replicate the pedigree display used by Ancestry.co.uk but after several days
effort and my limited experience of CSS I was unable to produce an acceptable result. I reverted to an 'old-school' method of using a table to
control the positioning and CSS to control the styling. In less than an hour I had a reasonable replica for the
pedigree display. I subsequently modified this display to pedigree display 2
to reflect my personal preferences:-
- I prefer to differentiate the relationship links between spouses from that between siblings.
- The use of a table to control the positioning simplifies the generation of the html code.
- It is a relatively simply matter to transpose rows and columns to generate a family tree type display
- I also developed alternative connector images to provide multiple connection lines for future development of a family tree display
based on this method
Having tried various methods of displaying a tree I concluded that what I needed was a method that would provide the following features:
- A draggable viewing port that would display only that part of the total tree that would fit in the available screen area
- A method to drag the view arround the total tree
- An interactive point and click method to change the tree to the family tree of any individual within the tree.
- Minimal white space
- A simple method for positioning the nodes within the view port
- A simple method for creating the connection lines between related individuals within the tree
drag the view to any part of the tree and provide zoom-in and zoom-out functions. Clicking on any individual within the tree will update the display to
the family tree for that individual whilst the edit button allows users to provide additional information to update the tree.