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

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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)