I’m looking for a flexible way to display the output of the GEDCOM data model or Gramps data model, which are the most common data models for genealogy. Both data models support family trees that include both biological parents and multiple interconnections between different branches of an ancestor tree.
One example of multiple interconnections would be a case where two sisters of one nuclear family marry two brothers of another nuclear family. This is the case for a distant relative of mine, sometime in the 17th century, as you can see in the screenshots (of my family tree in MyHeritage.com) below.
From the brothers’ perspective:
From the sisters’ perspective:
A more complicated example would be when a greatgrandmother of a man is the mother-in-law of the grandmother of his wife (or her sister). Something like that too occurs among my 18th century ancestors, but it’s a bit more difficult to provide a suitable screenshot.
While I know this can be done with Canvas, I prefer a solution that uses either SVG or HTML for display. Are there any JS libraries that support such multiple interconnections between different branches of the same tree out of the box? Or do you know any examples for eg. D3.js, jsPlumb or GoJS that supports both (1) dual parent linkage and (2) multiple interconnections out of the box? And if not, what approach would you recommend?
