Your browser does not support script
Home Search Disclaimer Login/Register
Updated : 6/2/2017

Web Interface


The appearance and style of the family tree section of the web will, quite naturally, replicate that of the remainder of the web site. However, the question remains how to best present the available data in a format that is clear and easy to nagivate.

Having tried several geneological web sites such as I found that I quite liked their method of displaying family tree information particularly the option of switching between a pedigree view to see more ancestors and a tree view to see more descendents. I therefore elected to mimic this style of presentation.

Family Tree

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:

  1. Retrieving the data. Generally this is straight forward since the data is often stored in a database or a GEDCOM format file.
  2. 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.
  3. Deciding on which individuals to display. Conventionally a family tree displays only blood relatives and not marital relatives other than spouses.
  4. 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.
  5. Display the family tree. Decide on the method to be used to display the tree.
  6. 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

Retrieving data

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:

  1. Fathers/Husbands are always displayed on the left and mothers/wives on the right.
  2. 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.

  1. Siblings of fathers are always added to the left of the father such that the direct male ancestor is always the rightmost sibling.
  2. Similarly, siblings of mothers are always added to the right of the mother such that the direct female ancestor is always the leftmost sibling.
  3. 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:

  1. The nodes do not overlap
  2. The relationship between nodes is clearly visible.
  3. As far as is practicable/feasible child nodes are centered below their parents.
  4. 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. 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 Algorithm for General Trees" Software Practice and Experience 10, 1980 553-561. A Javascript implementation of Walker's algorithm by Emilio Cortegoso Lobato is available at The CodeProject.[note: it is worth scrolling to the comments section to the comment "update - added a drag option to replace parent for node and a delete node option" and downloading the updated javascript presented there by Kevin Dorff]

I spent a long time modifying this javascript to permit the drawing of family trees where nodes have two parents but with little real success. The main issue is that the algorithm is 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:

  1. 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.
  2. 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.
  3. The third pass is a repeat of the first pass to minimise excess white space resulting from the second pass
  4. 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 here.

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 example).

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 and limitations:-

  1. The method only works effectively when showing descendents.
  2. 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.
  3. 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 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:-

  1. I prefer to differentiate the relationship links between spouses from that between siblings.
  2. The use of a table to control the positioning simplifies the generation of the html code.
  3. It is a relatively simply matter to transpose rows and columns to generate a family tree type display
  4. 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:

  1. A draggable viewing port that would display only that part of the total tree that would fit in the available screen area
  2. A method to drag the view arround the total tree
  3. An interactive point and click method to change the tree to the family tree of any individual within the tree.
  4. Minimal white space
  5. A simple method for positioning the nodes within the view port
  6. A simple method for creating the connection lines between related individuals within the tree

The final result (shown below) uses basic asp to create absolutely positioned divs for both the nodes and the connectors and javascript routines to 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.

Previous Next
1418 Page Hits