Family Circles - Genealogy/Family Relations modeling

Hey guys!

I wanted to share with you a project I’ve been working on for a while that’s called Family Circles. It’s a way to create, build and explore family relations easily and it uses three.js for a decent chunk of the 3D work.

For showcasing purposes this is a small section of a comprehensive Game of Thrones model that I spent some time making (Game of Thrones because of just how many family relations there are in those books/shows).


Family Circles is still in pretty early stages of its development so I would love any feedback that you guys might have, and if you want to explore the entire Game of Thrones model yourself then feel free to visit this page:

Game of Thrones

As a quick get started for this link, what you’re looking at when you click on it is the explorer. The display itself will be blank, initially, but if you go to the textbox in the upper right and type in a name then that’s how you get started. If the name is one that’s in the database, then you can select it from the dropdown menu that will show up and it will make a display for that character in the main area. Now, if the name has a blue dot under it (instead of the usual purple), then that means right clicking on that name will expand the families that the person is a part of. In this way you can continue to expand people until you get a massive and sprawling web of people. Another thing of note is that if the character’s name is blue then that means it has a page of information linked to it. A simple left click on that person will open up a page to a website with more information about them. This is all just a quick get started though, if you’re interested in learning more, the Family Circles homepage can be found here:

Family Circles

The tabs on the left of the screen in the above link will be able to tell you everything you might want to know about both the explorer and and how to build your own families (hopefully). Again, any and all feedback is appreciated; we have a forum associated with Family Circles but feedback on this site is just as valuable!

I’ve personally been spending some time catching up on my GOT shows now that the new season is coming out soon, and I find it interesting entering people’s names into the explorer on my phone while I watch. This not only helps me remember who they are but I also get to see who all they’re related to. It’s a pretty handy pocket guide, almost, and it’s a bit surprising sometimes seeing who all’s related to who.

Speaking of touch devices, if you’re using one while trying to use the explorer then it might be useful for you to go to the Explorer tab on the Family Circles home page. There’s a table there that can tell you how to perform various actions on the explorer with touch controls as opposed to computer controls.

Also, if you’d prefer a different example than the Game of Thrones one, then we have a few other sample models made up as well. If you click the Examples tab on the Family Circles homepage you’ll see that we have one for the US Presidents, the English Royal Family, and Harry Potter as well. The magnifying glass icon next to the family circle of interest will open up the explorer for that family, and the eye icon will open up the viewer (the viewer loads up the entire model in one go, so it may take a little while depending on the size of the model, and it doesn’t have the ability to search people).

Anyway, thanks for checking this out and I hope you guys enjoy it!

1 Like

Game of thrones example did not load for me. Just white screen. The other link worked. I did not figure out how to focus the camera on other parts of the graph though.

It looks very interesting, great job :slight_smile:

@Usnul Sorry things are not working for you. You do not see a text input box in the top right corner for the Game of Thrones link? What browser are you using from what sort of device?

From Explorer at the bottom of the page is a table which may help with what are supported actions.

You can double click on any object to focus the camera on that object. You may need to zoom in some to make sure the double click triggers on the target.