Loading GEDCOM Files into a d3.js Family Tree Visualization

The latest version of this project is at https://learnforeverlearn.com/ancestors/.

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.

A screenshot is below:

Viewing a Family Tree from a GEDCOM File
Tool available at https://learnforeverlearn.com/ancestors/

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.
• Change to a slightly less saturated pink