I am having a hard time to configure a proper way to display a family tree in a horizontal timeline. Most of family trees do not represent events based on time points, but in my case I will have to place the whole story in a time grid.

On top of the UI is a "year" navigation, showing years in order like 1970, 1971...

To be honest I have not seen a solution like that anywhere, so maybe it just isn't possible...

3 Answers 3


You don't mention which is the aspect of the family tree you are having trouble with. Horizontal trees can use time or be represented as a timeline, the problem is that the data usually increases on each generation, so you end up with something that looks like this:

enter image description here

But it sounds like you might be following only a few branches, not the whole tree, so in that case the layout would be similar to a timeline.

I found some good examples of 'effective' tree-timeline cross-breeds in the Genelines Timeline software page:

enter image description here

enter image description here

enter image description here

I think the key to drawing an easy to understand tree is to maybe drop some of the information (in the last example the timeline shows how many kids each person had, but doesn't say anything else about them).

  • Thanks for reply. The "problem" is that all information / branches must be included, and very soon the tree takes the form of your first example... So I really think that it is almost impossible to create an effective UX and UI.
    – JohnPixle
    Nov 1, 2012 at 19:43
  • Is this going to be a website/webapp?
    – Yisela
    Nov 1, 2012 at 19:44
  • It's not impossible if you can show/hide elements depending on what the user is looking for. If all information is available at the same time, then everything has the same importance. You mentioned events, so maybe they should be the focus. If you can add some interaction then it's perfectly possible.
    – Yisela
    Nov 1, 2012 at 20:12
  • @JohnPixle, why can't the first example be used but aligned with years? So replace where the image says "1st, 2nd, 3rd, etc." with "1970, 1971, 1972, etc." and align each person with the year they were born. (Unless you need to indicate the year they died as well - I don't have a suggestion for that.) Although generations may be staggered, a person would always appear after their parents, so they horizontal order would be maintained. Also, if this is displayed online, you could make use of tooltips that appear on hover.
    – sacohe
    Nov 2, 2012 at 0:24

Take a look at www.evolutionoftheweb.com.
This is a nice example of several events visualized in a horizontal timeline.

enter image description here


I fancy @Yisela's second example, the one that shows the lifespan of the persons, with a couple twists.
But the final outcome depends on the purpose of the application: is it focused on historical research, or is it for family usage?
My twists are:

  • First, allow for branch pruning. There are branches one is not interested in, like one who moved to a remote country and had a big family but without any relevant activity, and
  • Show parent-children relationships simply by sticking the boxes together, in order to simplify and save space.

You are in trouble if somebody marries to a cousin. The solution is to display the cousin twice, the second time deemed and linked to the first one.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.