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) 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 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.

Answer 2

I also needed to draw pedigrees with D3 so I figured out how. I have created examples that show the basic functionality and then add on advanced features such as expanding and showing descendants.

I don't know how you want to display marriages. Marriages are inherent in an ancestral pedigree but not in a descendancy chart. The code could be adapted to show spouses in the descendant nodes.

Here's a pic of how it looks. The style can be tweaked as desired.

Answer 3

This needs some work, but essentially the idea I propose is do a force layout with a special kind of node called relationship that do not draw a circle. It represents the bind between two subjects and can be the parent of more nodes.

In d3 you can extend all the data structures to fit what you want, then there is more work to bind the data but it is all customizable. Here is a sample of the data structures I would use in the force layout.

{
  "nodes": [
    {
      "type": "root",
      "x": 300,
      "y": 300,
      "fixed": true
    },
    {
      "type": "male",
      "name": "grandpa"
    },
    {
      "type": "female",
      "name": "grandma"
    },
    {
      "type": "relationship"
    },
    {
      "type": "male",
      "name": "dad"
    },
    {
      "type": "female",
      "name": "mum"
    },
    {
      "type": "relationship"
    },
    {
      "type": "male",
      "name": "I"
    }
  ],
  "links": [
    {
      "source": 0,
      "target": 2
    },
    {
      "source": 1,
      "target": 2
    },
    {
      "source": 0,
      "target": 3
    },
    {
      "source": 3,
      "target": 4
    },
    {
      "source": 4,
      "target": 6
    },
    {
      "source": 5,
      "target": 6
    },
    {
      "source": 6,
      "target": 7
    }
  ]
}

Hope I clarified something about the possibilities of d3.