Displaying Lifespan Information in a D3 Family Tree Visualization

The visualization discussed here is available at (the extra parameter is necessary in the url): https://learnforeverlearn.com/ancestors/?lifespan=true.

You can load sample trees or your own family trees from your gedcom files, and view ancestor or descendant trees from the file.

A few days ago, I was experimenting with a D3/three.js "Flame of Life" visualization (visualization, blog note about it), which used mortality tables from the Social Security administration to give some perspective on how long someone might live given that they've made it to a certain age.

I have started the incorporation of some aspects of this into a D3 family tree visualization I have been working on off and on, with the initial idea to have lots of little "flames" for people in a tree who are still living. This is a tricky-ish thing, and I'm not sure the flames will be large enough to be very visible, but just incorporating the lifespans at all into a tree seems to be an interesting visual thing, in spite of the current screen clutter.

The screenshot below shows a sample ancestor tree.

Ancestor Tree that also shows lifespans
(available at https://learnforeverlearn.com/ancestors/?lifespan=true)

The yellow lines below the horizontal line at the current year (2015) are actually gradient rects that provide information on the probability of a particular person living to a certain age past the present. An example is shown below from another tree.

Incorporating probabilistic information on lifetimes
(available at https://learnforeverlearn.com/ancestors/?lifespan=true)

Displaying lifespan information with a family tree adds a small extra dimension, with sometimes poignant results.


There are still many things to do to smooth this out. If you get a chance to take a look, comments are welcome.

Popular Posts