Handling Pedigree Collapse in a (d3) Family Tree Visualization

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

For all of us, if you go back in your family tree far enough you will start to have some intertwining. This is called pedigree collapse.

Yesterday, I was adding some sample trees to a (d3.js) family tree visualization. There was one available for the British monarchy, so I loaded it up. It looked funny because if you went back to a certain point all of the branches looked the same. Hovering over the individuals showed that some of the same persons were repeated many times due to intermarriage. Even though we all have it in our family tree, it is perhaps more well-known about royal trees because they get to be in the history books.

So, I realized that the visualization needed to handle this kind of thing.

At the technical level, the basic (simple) approach is to massage the generated coordinates of the nodes that the d3 tree command generates, so that duplicates are placed in the same position on the page. This is done prior to calling tree.links on the nodes.

The result for the British monarchy is shown below. The swooping curved lines that d3 generates add a dramatic effect, imo.

Family Tree of the Royal Family, with a few of the intermarriages highlighted
You can browse this tree at https://learnforeverlearn.com/ancestors/
(family tree data from Denis R. Reid's 1992 file, available at Famous GEDCOMS)

Popular Posts