justincy / d3-pedigree-examples

Examples of how to create family pedigrees with D3

d3-pedigree-examples

Examples of how to create traditionally styled family pedigrees with D3 v3.

When I started learning how to draw pedigrees with D3, I had difficulty mixing and matching techniques from different examples and separating the basics from the fancy stylistic additions. Hopefully by showing the basics and how to incrementally add advanced features, you won't have to become an expert in D3 just to draw a pedigree.

My requirements were:

• A tree with square boxes and straight connecting lines. Most D3 tree examples used circles for nodes and curved connecting lines.
• There needed to be a fixed distance between generations. By default, D3 trees fill up all the available space given to them.
• The tree needed to be expandable and collapsible.
• Need a way to display both ancestors and descendants.
• Pan and zoom.

Examples

• Basic: A basic static pedigree.
• Text Wrap: A basic static pedigree with text wrap using d3plus.
• Expand and Collapse: Click on persons to expand and collapse the tree.
• Smooth Transitions: Changes are animated when the tree is expanded or collapsed.
• Ancestors and Descendants: Show both ancestors and descendants.
• Ancestors and Descendants - OOP: A more sane example of ancestors and descendants using classes.

Notes

• Pan and zoom via the mouse are enabled in all examples.

• In the code you'll often see the variable d as the only parameter of an anonymous function. d is a D3 convention that stands for data.

• D3 tree layouts are configured for top -> bottom displays. We want a left -> right display so the x and y coordinates are flipped for nodes and links only. This is made even more complicated by svg using screen coordinates instead of cartesian coordinates.

  Say D3 calculates that a root node will be displayed at (10,10) with a child below it at (10,20). We switch the x and y which leaves the root at (10,10) but moves the child to (20,10) which is now to the right. This gives us the traditional left to right ancestral pedigree view.

  To display descendants we swap the x and y then negate the x value which puts child nodes at the left.

• You have to draw two different trees in order to display both ancestors and descendants which dramatically increases the complexity. I strongly suggest an OOP approach if you need to do that. As you can see in the source code, it gets pretty hairy otherwise.

• Displaying formatted text in SVG can be a pain because you have little control. There is no built-in way to do text wrapping and you also can't easily style one word or phrase in a sentence. To get around these limitations you could use a foreignObject to display HTML and have all the formatting tools of CSS. However, foreignObject is not supported by any version of IE (11 is the latest at the time of writing). If you need to support any version of IE then you need to stick with pure SVG. Since we're using D3 we can use the handy D3plus library to help with text wrapping. See the Text Wrap example.

• D3 does not handle pedigree collapse well. D3 trees are designed to only ever branch out; there is no built-in mechanism for allowing the tree to collapse. Here are some options for handling this ourself:

  1. Duplicate common ancestor nodes instead of collapsing the pedigree. This is only feasible if you don't use a dynamic tree. When D3 processes updates to a dynamic tree, it relies on all nodes having a unique ID. So to make this work with a dynamic tree you would need to generate unique IDs for each duplicated person in the pedigree.

  2. Allow the pedigree to collapse by only displaying a common ancestor once. We will let D3 draw the first connection then draw all other connections manually. This is not trivial, especially if you want to have a dynamic tree. There is an example of this. It doesn't appear to be a solution that scales well.

  3. Try using dagre, a library desgigned for rendering DAGs. There is an add-on available for integration with d3 called dagre-d3. I have no experience with this but it seems like a viable solution.

d3-pedigree-examples's Issues

Document the data structure used and the reasoning behind it

Possibly explain how alternative data structures might be used, such as a flat data structure.

Add a vertical pedigree example

Help for creating a top-bottom example has been requested many times: #10, #11, #16.

Text wrap issue in transitions.html

In transitions.html, textwrap functionality is not added.If text is long, what changes are required and where to change in my code.Can you send modified html link or page.

How can i make it vertical (top to bottom) rather than horizontal?

How can i alter to make it vertical i.e. top to bottom rather than horizontal chart? I'm starting from one ancestor and have all children below.

I'm using this example i.e. Ancestors & Defendants.

Example with descendants

The bowtie view with descendants on the left and ancestors on the right.

Family siblings

Would it be possible to include children of the descendants in tree? I would like to include my brother and his children as well as my fathers brother and his family, and so on...

can i make the elbow function vertical?

Can i make this function become vertical?
this is the elbow function for horizontal
function elbow(d) {
return "M" + d.source.y + "," + d.source.x
+ "H" + (d.source.y + (d.target.y-d.source.y)/2)
+ "V" + d.target.x
+ "H" + d.target.y;
}

Upgrade to d3 version 4.x

It would be great to have this upgraded to d3 version 4.x

Showing the full tree

Thanks for those examples. They are very good.

I thought I can use Family Tree Maker or Family Search to build my family tree. However, when I look at my family history, there are complex relations like common ancestors and cousin marriages etc... I also don't find a software that shows the full picture of my family and my wife's family where I can find the common ancestor. Am I missing anything with the Family Tree Maker or Family Search?

I played with dagre and d3, but dagre does not support ranking. So, it is hard to draw the brothers in the same generation line as an example.

Have you tried presenting the brothers, sisters and wives in the tree and show their ancestors too so the common ancestor can be found? Please see the image that I have attached.

What if a child has 3 step dads

Multiple parent relationship. Currently it duplicates the child. Is it possible to show child only once if it has multiple parents.

Marriage relationships in pedigree

How would I add nodes in your code to show a marriage relationship ?

Right to left?

Hello @justincy and thank you for your amazing work on this project.

I have a question (possibly a feature request 😄 ), how hard will it be to let the tree grow from right to left? as oppose to the way it is growing now (from left to right).

Support for multiple interconnections of different branches?

How's support for multiple interconnections between different branches? I'm looking for a flexible way to display the output of a GEDCOM ), which is the standard data model for geneology that supports multiple interconnections between different branches of an ancestor tree.

One example would be a case where two sisters of one family marry two brothers of another family. This is the case for a distant relative of mine, sometime in the 17th century, as you can see in the screenshots (of my family tree in MyHeritage.com) below.

From the brothers' perspective:

From the sisters' perspective:

A more complicated example would be when a greatgrandfather of a man is the mother-in-law of the grandmother of his wife (or her sister). Something like that too occurs among my 18th century ancestors, but it's a bit more difficult to provide a suitable screenshot.

Is there a way to make this kind of connections with your library without duplicating one or more persons or do you plan on supporting this feature in the future?

how to convert this to top to bottom

Trying to expand children/parent on every node

Hey Justin, opened this issue to see if there's a possibility on expanding/collapsing children/parent tree on every node from a family tree.

Thanks for your help!

Attached a image for more visual understanding.

Centering the tree in svg by the origin node

How to centering the tree follow the origin node location, because the tree is too big and the svg showing left hand side of the tree, by the way, i enabled the zoom and pan function of the svg.
this is the problem
tree
this is my code.
`var treeData = [
{'name' : 'CDS','icon': '../image/logo.png','padding':'19','circlesize':'19.5','user_id': 'CDS','level':'CDS','children' : [{'name' : 'Yap Cheng Wei','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '1','level':'Senior Sniper','children' : [{'name' : 'woon cai cai','icon': '../image/prosniper.png','padding':'42','circlesize':'12.5','user_id': '2','level':'Pro Sniper','children' : [{'name' : 'tan kiang kiong','icon': '../image/prosniper.png','padding':'42','circlesize':'12.5','user_id': '7','level':'Pro Sniper','children' : [{'name' : 'koo hou wai','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '19','level':'Senior Sniper','children' : [{'name' : 'Gan Jiang Han','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '50','level':'Senior Sniper','children' : [{'name' : 'Jenny Lim ','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '80','level':'Sniper'},{'name' : 'Low Jia Sheng','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '81','level':'Sniper'},{'name' : 'See Jia Min','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '82','level':'Sniper'}]},{'name' : 'Lim Di er','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '51','level':'Senior Sniper','children' : [{'name' : 'Tan Jie Ying','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '83','level':'Sniper'},{'name' : 'lim jo yun','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '84','level':'Sniper'},{'name' : 'kok mei kuan','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '85','level':'Sniper'}]},{'name' : 'Tiu Zhi Jian','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '52','level':'Senior Sniper','children' : [{'name' : 'Kam Hui Yin','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '86','level':'Sniper'},{'name' : 'Chua Mei Xuan','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '87','level':'Sniper'},{'name' : 'Tan Mei Ke','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '88','level':'Sniper'}]}]},{'name' : 'Zheng Yu cheng','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '24','level':'Senior Sniper','children' : [{'name' : 'Gan De Huat','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '53','level':'Senior Sniper','children' : [{'name' : 'Tan Mei Mei','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '89','level':'Sniper'},{'name' : 'Ng li ling','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '90','level':'Sniper'},{'name' : 'Chan Li Sen','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '91','level':'Sniper'}]},{'name' : 'Gan Wei Ping','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '54','level':'Senior Sniper','children' : [{'name' : 'Wong Ka Wai','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '92','level':'Sniper'},{'name' : 'Tan Li Hui','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '93','level':'Sniper'},{'name' : 'Tan Mei Wen','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '94','level':'Sniper'}]},{'name' : 'Teoh Ha Ze','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '55','level':'Senior Sniper','children' : [{'name' : 'Yap Sally ','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '95','level':'Sniper'},{'name' : 'Yap Shan ee','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '96','level':'Sniper'},{'name' : 'Lim Shen Ni','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '97','level':'Sniper'}]}]},{'name' : 'Goh Xue ling','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '25','level':'Senior Sniper','children' : [{'name' : 'Tee Hui Qi','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '56','level':'Senior Sniper','children' : [{'name' : 'Soh Xie Wei','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '98','level':'Sniper'},{'name' : 'Soh hui su','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '99','level':'Sniper'},{'name' : 'Tan Wei Xin','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '100','level':'Sniper'}]},{'name' : 'Teh Isa Bella','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '57','level':'Senior Sniper','children' : [{'name' : 'Chew wa sa','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '101','level':'Sniper'},{'name' : 'vicky chang ','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '102','level':'Sniper'},{'name' : 'Tan Jia Ler','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '103','level':'Sniper'}]},{'name' : 'Koo Jia Ren','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '58','level':'Senior Sniper','children' : [{'name' : 'Lim Xiao Enn','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '104','level':'Sniper'},{'name' : 'Ang Jia Yan','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '105','level':'Sniper'},{'name' : 'lee Yi Jia','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '106','level':'Sniper'}]}]},{'name' : 'Jasmine Koh ','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '26','level':'Sniper'}]},{'name' : 'tan li li','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '8','level':'Senior Sniper','children' : [{'name' : 'lee kai wen','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '20','level':'Senior Sniper','children' : [{'name' : 'tan Jia Huan','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '59','level':'Sniper'},{'name' : 'Trista tan ','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '60','level':'Sniper'},{'name' : 'teyo zhe wee','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '61','level':'Sniper'}]},{'name' : 'Wong Ja mu','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '27','level':'Senior Sniper','children' : [{'name' : 'Gan Wei Yi','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '62','level':'Sniper'},{'name' : 'Zhou Zheng Hong','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '63','level':'Sniper'},{'name' : 'Tan Yuan Shan','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '64','level':'Sniper'}]},{'name' : 'Aw jing yang','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '28','level':'Senior Sniper','children' : [{'name' : 'Tan Se Te','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '65','level':'Sniper'},{'name' : 'Tan Xin Yee','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '66','level':'Sniper'},{'name' : 'Hor Yan Qi','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '67','level':'Sniper'}]},{'name' : 'Sim shi ying','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '29','level':'Sniper'}]},{'name' : 'yap boon hua','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '9','level':'Sniper','children' : [{'name' : 'Ng hui yin','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '21','level':'Sniper'}]},{'name' : 'tan li fun','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '10','level':'Senior Sniper','children' : [{'name' : 'Tan Xiao Wei','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '30','level':'Senior Sniper','children' : [{'name' : 'Yap Sheng zhi','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '68','level':'Sniper'},{'name' : 'Tan Yu Le','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '69','level':'Sniper'},{'name' : 'Yang Gong jun','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '70','level':'Sniper'}]},{'name' : 'Tee Swee Kiam','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '31','level':'Senior Sniper','children' : [{'name' : 'teoh hui qing','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '71','level':'Sniper'},{'name' : 'Tan li na','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '72','level':'Sniper'},{'name' : 'Zhong ming zhen','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '73','level':'Sniper'}]},{'name' : 'Tee Siao Lun','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '32','level':'Senior Sniper','children' : [{'name' : 'Tee ker sin','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '74','level':'Sniper'},{'name' : 'loh na na','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '75','level':'Sniper'},{'name' : 'tee pei ssu','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '76','level':'Sniper'}]}]},{'name' : 'koh aik lee','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '11','level':'Sniper'},{'name' : 'woon yi ting','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '12','level':'Sniper'},{'name' : 'Koh jin yi','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '13','level':'Senior Sniper','children' : [{'name' : 'Tan Sheao Wei','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '46','level':'Sniper'},{'name' : 'wong lian may','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '47','level':'Sniper'},{'name' : 'Angie Tan ','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '48','level':'Sniper'}]},{'name' : 'George Lim ','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '23','level':'Sniper'},{'name' : 'Leong yong wa','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '34','level':'Sniper'},{'name' : 'Yoong Sze Jiat','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '35','level':'Sniper'},{'name' : 'yvvonne ggo ','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '36','level':'Sniper'},{'name' : 'ee wee hao','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '37','level':'Sniper'},{'name' : 'chua wee hao','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '38','level':'Sniper'},{'name' : 'Chia Ya li','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '39','level':'Sniper'},{'name' : 'Hussein Abdi ','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '49','level':'Sniper'},{'name' : 'Gan Jia Yun','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '77','level':'Sniper'},{'name' : 'Lim Leon ','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '78','level':'Sniper'},{'name' : 'Tan Kristine ','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '79','level':'Sniper'}]},{'name' : 'kenny lim eng sheng','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '5','level':'Senior Sniper','children' : [{'name' : 'Tan Re Dai','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '17','level':'Sniper'},{'name' : 'Ong Kelvin ','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '40','level':'Sniper'},{'name' : 'Loo Ai Vee','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '41','level':'Sniper'},{'name' : 'Sok sui sui','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '42','level':'Sniper'}]},{'name' : 'poh wei sheng','icon': '../image/seniorsniper.png','padding':'42','circlesize':'12.5','user_id': '6','level':'Senior Sniper','children' : [{'name' : 'Ooi Zi yin','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '18','level':'Sniper'},{'name' : 'Yeoh Pai See','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '43','level':'Sniper'},{'name' : 'wong ka mee','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '44','level':'Sniper'},{'name' : 'Koh li on','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '45','level':'Sniper'}]},{'name' : 'wong siong xie','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '14','level':'Sniper'},{'name' : 'Kenny Tan Kee Kiong','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '117','level':'Sniper'},{'name' : 'Lucifer Morningstar','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '118','level':'Sniper'},{'name' : 'goh zhan wei','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '125','level':'Sniper'},{'name' : 'goh zhan wei','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '126','level':'Sniper'},{'name' : 'KOH JIA YUAN','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '127','level':'Sniper'}]},{'name' : 'koh wei hao','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '3','level':'Sniper','children' : [{'name' : 'wu xie','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '15','level':'Sniper'}]},{'name' : 'Yap Zhan Wei','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '4','level':'Sniper','children' : [{'name' : 'Jing teng xing xing','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '16','level':'Sniper'}]},{'name' : 'Seow Ai Lyn','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '22','level':'Sniper'},{'name' : 'Lee guan ling','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '33','level':'Sniper'},{'name' : 'Jason Chan Keat Hwee','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '107','level':'Sniper'},{'name' : 'Chan Keat Hwee','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '108','level':'Sniper'},{'name' : 'Tan Bao Bao','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '110','level':'Sniper'},{'name' : 'yap xue wei','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '111','level':'Sniper'},{'name' : 'Chong Li Ying','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '112','level':'Sniper'},{'name' : 'Tan Chee Kang','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '116','level':'Sniper'},{'name' : 'tan su mei','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '119','level':'Sniper'},{'name' : 'Yap Zhan Wei','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '122','level':'Sniper'},{'name' : 'bruce lim kai yang','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '123','level':'Sniper'},{'name' : 'Yap Khaa Keang','icon': '../image/sniper.png','padding':'42','circlesize':'12.5','user_id': '124','level':'Sniper'}]}];

      var width = $("#fullmode-chart").width(),
        height = 2200;

    var cluster = d3.layout.tree()
        .nodeSize([100, 200])
        .separation(function(){
          return .5;
        })
        .size([height, width - 160]);

    var zoom = d3.behavior.zoom().on("zoom", function () {
        svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
        })

    var svg = d3.select("#fullmode-chart").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("object-fit", "cover")
        .call(zoom)
        .append("g")
        .attr("transform", "translate(40,0)");
        root = treeData[0];
      var nodes = cluster.nodes(root).reverse();
      nodes.forEach(function(d) { d.y = d.depth * 100; });
      var link = svg.selectAll(".link")
          .data(cluster.links(nodes))
          .enter().append("path")
          .attr("class", "link")
          .attr("d", elbow);

      var node = svg.selectAll(".node")
          .data(nodes)
          .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

      var tooltip = d3.select("#fullmode-chart")
            .append("div")
          .attr("class", "tooltip")
            .style("position", "absolute")
            .style("z-index", "10")
            .style("visibility", "hidden");

      var circle = node.append("circle")
          .attr("transform", function(d) { return "translate(0,"+d.padding+")"; })
          .attr("r", function(d) { return d.circlesize; })
          .on("mouseover", function(d){
            tooltip.transition()
                .duration(200)
                .style("opacity", .9);
            tooltip.html("ID : "+d.user_id+"<br/> level : "+d.level+" "+"<br/> name :"+d.name)
                .style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY - 28) + "px");
            return tooltip.style("visibility", "visible");})
          .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
          .on("mouseout", function(){return tooltip.style("visibility", "hidden");})
          .on('click', function(d) {
            if(d.user_id != "CDS"){
              console.log('open tab')
              window.open(
                'agent_profile.php?id='+d.user_id,
                '_blank' // <- This is what makes it open in a new window.
              );
            }
          })
          .style("fill-opacity", 1);

      node.append("image")
          .attr("transform", function(d) { return "translate(0,"+d.padding+")"; })
          .attr("xlink:href", function(d) { return d.icon; })
          .attr("x", "-11px")
          .attr("y", "-11px")
          .attr("width", "22px")
          .attr("height", "22px")
          .on("mouseover", function(d){
            tooltip.transition()
                .duration(200)
                .style("opacity", .9);
            tooltip.html("ID : "+d.user_id+"<br/> level : "+d.level+" "+"<br/> name :"+d.name)
                .style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY - 28) + "px");
            return tooltip.style("visibility", "visible");})
          .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
          .on("mouseout", function(){return tooltip.style("visibility", "hidden");})
          .on('click', function(d) {
            if(d.user_id != "CDS"){
              console.log('open tab')
              window.open(
                'agent_profile.php?id='+d.user_id,
                '_blank' // <- This is what makes it open in a new window.
              );
            }
          })
          .style("fill-opacity", 1);

    function elbow(d) {
      return "M" + d.source.x + "," + d.source.y
        + "H" + ((d.target.x-d.source.x)/2,d.source.x )
        + "V" + d.target.y
        + "H" + d.target.x
        + "v" + ((d.source.y-d.target.y)/2,42 );
    }`

Long name wrapping into OOP code

Thank you very much for this code! It works fabulous!

I was trying to add the long name to the OOP version, but I can't figure it out. Could you help, please?

Thank you very much indeed!

Jaume

How to use IBD relation ship PI_HAt value to plot the pedigree plot

@justincy : Thanks for nice Pedigree plot.
I have several samples with their relationship determined by IBD and we have information with pairs of individuals with IBD PHT scores For example input data:
Sample1, Sample2, 0.25
Sample1, Sample3, 0.125
....
How to use your tool to get the pedigree plot

Say:

1. Identical twins, and duplicates, are 100% identical by descent (Pihat 1.0)
2. First-degree relatives are 50% IBD (Pihat 0.5)
3. Second-degree relatives are 25% IBD (Pihat 0.25)
4. Third-degree relatives are 12.5% equal IBD (Pihat 0.125)

Missing html tags

In your examples <head> tag is missing. You should put <style> there.
You also need to close using the </body> the body