5

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

georaldc
  • 1,880
  • 16
  • 24
  • Just a caution: family trees are *not* hierarchical. – Mike Sherrill 'Cat Recall' Sep 07 '12 at 22:31
  • What do you mean by not hierarchical? – georaldc Sep 08 '12 at 00:24
  • A tree is hierarchical. It proceeds in an orderly way from the root to the tip of each leaf. But families aren't that tidy. Given a sufficiently large sample size, you'll find a brother who married a sister, a child who married her own grandfather, a niece who married an uncle, and so on. In short, trees don't have loops, but families do. – Mike Sherrill 'Cat Recall' Sep 08 '12 at 00:33
  • Man, scary stuff lol. But yeah, you do have a point. I also tried starting from the very top of the tree (by adding a "depth" field to my family member table) and running down top to bottom, left to right but still ended up having a really hard time making sense of it all T_T – georaldc Sep 08 '12 at 02:14
  • My FF16 crashes when i opened that link! -_- – StasGrin Sep 08 '12 at 15:03
  • The family echo link? Works fine here – georaldc Sep 08 '12 at 18:29

1 Answers1

2

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.

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
  • Interesting. I'll try looking at the sample visualizations and see which one is closest to what I need. – georaldc Sep 08 '12 at 18:28