# Drawing a family tree with Phaser

## Recommended Posts

I'm working on a family tree graph looking similar to what you see in the attachment. I have the JSON data and the relationships between people as shown below:

`{ id: 1, name: "Me", parents: [3,4] }{ id: 2, name: "My Wife" }{ id: 3, name: "My Dad", parents: [5,6] }{ id: 4, name: "My Mom" }{ id: 5, name: "My Dads Dad", parents: [7,8] }{ id: 6, name: "My Dads Mom" }`

I researched into few different ways to effectively draw this graph. The first attempt was to use SVG. Drawing the dad-son relation was easy with Y coordinates. But finding the X coordinates is tough. Especially placing the nodes (boxes) efficiently on the screen to use maximum screen space and better user experience. A good example is drawing me and my brother with my dad and mum versus​ me with my dad and mum.

• Is Phaser a solution to the problem that I'm trying to solve which is to dynamically place the nodes based on the dad-son or me-brother-dad-son relation?
• Is finding the geometrical coordinates and placing the nodes is the solution to this problem if I can't use Phaser? Is there any other branch in mathematics or physics that I use to solve this problem?

There is a good example to draw a family tree with D3.JS is on this page.

##### Share on other sites

• 1 year later...

On 8/11/2015 at 8:01 PM, wonderfulworld said:

I'm working on a family tree graph looking similar to what you see in the attachment. I have the JSON data and the relationships between people as shown below:

```
{ id: 1, name: "Me", parents: [3,4] }{ id: 2, name: "My Wife" }{ id: 3, name: "My Dad", parents: [5,6] }{ id: 4, name: "My Mom" }{ id: 5, name: "My Dads Dad", parents: [7,8] }{ id: 6, name: "My Dads Mom" }```

I researched into few different ways to effectively draw this graph. The first attempt was to use SVG. Drawing the dad-son relation was easy with Y coordinates. But finding the X coordinates is tough. Especially placing the nodes (boxes) efficiently on the screen to use maximum screen space and better user experience. A good example is drawing me and my brother with my dad and mum versus me with my dad and mum.

• Is Phaser a solution to the problem that I'm trying to solve which is to dynamically place the nodes based on the dad-son or me-brother-dad-son relation?
• Is finding the geometrical coordinates and placing the nodes is the solution to this problem if I can't use Phaser? Is there any other branch in mathematics or physics that I use to solve this problem?

There is a good example to draw a family tree with D3.JS is on this page.

• Can you give me the code of it?