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.
A screenshot is below:
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).
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)
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
- 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