Loading GEDCOM Files into a d3.js Family Tree Visualization

Note: There's lots still to do with this project. Some known TODO's are listed below.

A while back, I put together a d3.js visualization for showing what ten generations of ancestors looks like. Part of the point of the project was to demonstrate just how fast the number of your ancestors grows as you go back. As a species, we really have a hard time appreciating exponential growth. I also wanted to see a family tree appropriately "staggered" in time, taking into account the different birth years of parents.

The other day, someone sent me a note asking about loading GEDCOM files. These are kind of the standard format for family trees, although there's some messiness with them. You can export your family trees as GEDCOM files from Ancestry.com (see here for how to do this), and I assume from other family tree software as well. These are just text files, and there are a lot of parsers already out there. I found a short javascript one for node that I modified for use in this project. At the moment, I'm just using birth/death/name information, although there's a lot of other information usually available in these files.

One thing I had not considered before adding GEDCOM data was the calculation of average lifespans for males and females in a tree. This is interesting. There are probably some other statistics that are easy to bring out as well, including more detailed distributions of lifespans, perhaps even as a function of cutoff year (e.g., to see lifespans generally get shorter the farther back you go).

Moving mouse over node shows basic information, including
reinforcing how it doesn't take too far back before there are
a lot of ancestors at a given level
(pedigree collapse probably happens sooner than you think)

Things TODO

Here are some notes to self on some things I still want to add to this.

Incorporate better responsive design

David Walsh's Debounce incorporated, with redraw on screen resize

Some layout tweaks based on a small screen breakpoint

The current visualization is focused on a root person and their ancestors (based on the original goal of the project itself). This needs to be broadened to show siblings.

Be able to "flip" a tree so that instead of seeing ancestors, the focus is on descendants

Be able to zoom/translate/change root person

Apparently, there can be some oddness with GEDCOM files that need to be guarded against

Include historical events to provide some context

Use fonts from different periods as appropriate

Have option of showing just a single pedigree line vertically, with appropriate annotations taking advantage of the available screen space

Include more displayed information as it can fit (rather than requiring mouseover)

Use 3D, perhaps with a combination of the handy d3 routines coupled with three.js

Things Dealt With

On Firefox, the mouseover on nodes wasn't working - turns out the long horizontal line that follows the mouse was occluding the event from reaching the underlying node. For now, set pointer-events:none on the class for the line and it seemed to address the issue.

The purpose of this page is to summarize in one place some of the interactive visualizations I have worked on. Most of these were built...

"When you start on your journey to Ithaca, then pray that the road is long, full of adventure, full of knowledge... Always keep Ithaca fixed in your mind. To arrive there is your ultimate goal. But do not hurry the voyage at all." (from "Ithaca", by C. P. Cavafy)