How do I show marriages in a d3.js based 'family-tree'?

Question

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

Answer 1

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.