How do I draw the lines of a family tree using HTML CSS?

Question

I'm trying to implement something similar to what http://www.ancestry.com has, but I'm not sure how to draw the lines.

Here is a rough ascii sketch of what I want to do:

                 +----GrDAD1
                 |
     +----DAD----+
     |           +----GrMOM1
ME --+
     |           +----GrDAD2
     +----MOM----+
                 |
                 +----GrMOM2

I think one way to do this is to create a table of cells, and create images of the lines, connecting each of the children to their parents. I'm guessing there's an easier way to do this though, but my knowledge of CSS is quite limited. Does anyone have a suggestion on how I can implement this?

Answer 1

Another option for a graphical interface would be the canvas element. You can find some info on it here, here, and some demos of what it can do here.

Personally, I would choose Canvas with an image map overlay or possibly Flash. Creating a graphical layout using only divs or tables could get out of hand very quickly and create huge and ugly code. Although that's a matter of opinion. :)

You could use canvas to render the lines, and then absolutely position divs with text for each node. Or you could render the whole thing in canvas (at which point you would need an image map overlay if you want the rendered tree to be interactive.)

Answer 2

One option is to use absolute positioning and a few images. You will need a horizontal line and a vertical line image. Then use positioning to position the items with the corresponding lines.

Answer 3

The examples I've seen so far use flash for stuff like that. http://academia.edu for example.

Otherwise, I would probably use absolutely positioned DIVs to make up the lines - that would require some complicated calculations, though :)

A third option - if you are willing to use more javascript and sacrifice some browser compatibility is to use the SVG element. You can checkout this library: http://raphaeljs.com/ There is a nice tree-like demo in there that you may find useful (http://raphaeljs.com/graffle.html).

Answer 4

google has a control for this

http://code.google.com/apis/visualization/documentation/gallery/orgchart.html

Answer 5

I guess using CANVAS.

Have a look.. may be it gives some idea Drawing Graphics with Canvas

Answer 6

I'll throw one more answer in, although the answers above are all in the ballpark.

Let's assume you want to work on all browsers. If you need to work on Internet Explorer, and you code your own Canvas solution, you may want to include ExplorerCanvas.

Family trees are essentially binary trees -- I know, real life is tricky with adoptions, divorces, ugh, but let's just assume for a second that they're binary going in one direction (ancestors) from a particular person.

A good tool that uses Canvas, has the bridge to work on IE included, and uses a simple and general data format is the JavaScript InfoVis Toolkit.

Check out the sample at: http://thejit.org/static/v20/Jit/Examples/Spacetree/example2.html

It may not be exactly what you want out of the box, but you can tweak the look and feel.

The data payload to plug-in is very simple, and your example would look something like this:

var tree = {
  id: "ME",   // Needs to be internally unique 
  name: "ME", // Visual label, does not need to match id 
  data: {},   // not really used here, but parameter needed
  children: [
    {id: "DAD", 
    name: "DAD", 
    data: {},
    children: [
      {id: "GrDAD1", 
      name: "GrDAD1", 
      data: {},
      children: []},
      {id: "GrMOM1", 
      name: "GrMOM1", 
      data: {},
      children: []},          
    ]},
    {id: "MOM", 
    name: "MOM", 
    data: {},
    children: [
      {id: "GrDAD2", 
      name: "GrDAD2", 
      data: {},
      children: []},
      {id: "GrMOM2", 
      name: "GrMOM2", 
      data: {},
      children: []},          
    ]}
  ]
};

I'm sure there are other solutions out there, and I hope you find one that works for you.

Answer 7

I like SlickMap CSS for this.

Since it's made for sitemaps, it styles nested lists of links, but it's trivial to modify it to handle more than links in each cell, like I did here: http://dl.dropbox.com/u/546793/demo/SlickmapCSS_rich/index.html

Answer 8

You can do it with pure css. Here is an example :

http://thecodeplayer.com/walkthrough/css3-family-tree

Answer 9

You can use jsPlumb, which is pretty good for that kind of stuff http://jsplumbtoolkit.com/demo/chart/mootools.html