Building family trees using HTML/JS/CSS/PHP/MySQL

Question

I've been tasked to build something similar to this and I need some suggestions/opinions for an effective solution:

http://familyecho.com

So far, I've tried to represent my data using the Nested Set Model but I don't think its possible to have multiple parent nodes with this. Almost every example I've seen involves only 1 parent with multiple children. I also tried using the Google Visualization Organization Chart which looks great and solves pretty much all display problems but I run into the same problem with nodes only supporting 1 parent again. So I figured I try building something on my own and well, I haven't had much luck with that.

As for getting the tree to display correctly, one of the biggest problems is figuring out how to get the nodes positioned in the right places. Notice how in Family Echo, parent nodes are spaced out properly depending on how many children they have, so as not to collide with other surrounding nodes. I've been trying to at least replicate this behavior so I would greatly appreciate any tips. What I tried was looping through an array like the one below that contains all the data about the family:

    {
    508 : {
        "id" : 1,
        "name" : "Son",
        "Parent" : {
            17864 : {
                "id" : 2,
                "name" : "Father"
            },
            65926 : {
                "id" : 3,
                "name" : "Mother"
            }
        }
    },
    17864 : {
        "id" : 2,
        "name" : "Father",
        "Partner" : {
            65926: {
                "id" : 3,
                "name" : "Mother"
            }
        },
        "Son/Daughter" : {
            508 : {
                "id" : 1,
                "name" : "Son"
            }
        }
    },
    65926 : {
        "id" : 3,
        "name" : "Mother",
        "Partner" : {
            17864: {
                "id" : 2,
                "name" : "Father"
            }
        },
        "Son/Daughter" : {
            508 : {
                "id" : 1,
                "name" : "Son"
            }
        }
    }
}

(508, 17864, 65926 act as unique random keys for each family member), and then using some recursive functions, create a second cleaner variable without any repetitions and including calculated x/y coordinates for each member. 2nd variable example below:

{
    508 : {
        "id" : 1,
        "name" : "Son",
        "x" : 0,
        "y" : 0
    },
    17864 : {
        "id" : 2,
        "name" : "Father",
        "x" : 1,
        "y" : -1
    },
    65926 : {
        "id" : 3,
        "name" : "Mother",
        "x" : -1,
        "y" : -1
    }
}

I then loop through this 2nd variable and start drawing fixed-dimension DIVs with absolute positioning and modifying left and top CSS values with the X and Y coordinates. Is this a good approach, or is there a better way (or maybe something like the google org chart visualization to speed things up)?

Answer 1

This sounds like a job for D3.js.

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.