How do I show marriages in a d3.js based 'family-tree'?
I'm a HTML/CSS developer, researching javascript solutions for building a 'family-tree' which needs to show marriages (from outside the family, of course) in a meaningful way.
Essentially I'm looking at basing it upon a dendrogram, based on d3.js, e.g. http://bl.ocks.org/4063570, but I've struggled to find anything out there that expresses 'marriages'.
Below is an image of the data I will be basing it upon:
Any help / suggestions / links would be much appreciated! I just don't know if it's even possible, but would love to use d3.js as it looks so well-made, and apparently versatile.
Answer
There are some options, but I believe each would require a bit of work. It would help if there were one single standard for representing a family tree in JSON. I've recently noticed that geni.com has a quite in-depth API for this. Perhaps coding against their API would be a good idea for reusability...
-- Pedigree tree --
The Pedigree Tree might be sufficient for your needs. You'd make in-law's linkable, where if you clicked on their name the graph would redraw so you could see their lineage.
-- Bracket Layout Tree --
Similar to the Pedigree Tree, but bidirectional, this Bracket Layout Tree lets you handle a "here are my parents, grandparents, children, grandchildren" type view. Like the Pedigree Tree, you'd make individuals linkable to re-center the bracket on that node.
-- Force-Based Layout --
There are some interesting force-based layouts that seem promising. Take a look at this example of a force-based layout with smart labels. An adjustment to the algorithm for how the "force" is determined could make this into a very lovely tree, with older generations above or below newer ones.
-- Cluster Dendogram (why it fails) --
The d3.js layouts I've seen that would lend themselves best to family trees assume a single node is the parent, whereas you need to represent the parent as the combination of (visually a "T" between) two nodes: one node that is a member of your tree, and one floating node that represents the in-law. Adjusting a cluster dendogram to do this should be feasible but not without significant modification.
If you--or anyone else for that matter--tackle this, let me know. I'd like to see (and benefit from) the work and may be able to contribute to it if feasible.