justincy / d3-pedigree-examples Goto Github PK
View Code? Open in Web Editor NEWExamples of how to create family pedigrees with D3
License: MIT License
d3-pedigree-examples's People
Contributors
Stargazers
Watchers
Forkers
smithcp200 hartly97 caiomsouza gpcr diegoachury ilbonte medero vsmalladi samoretc je3f0o ashwinrayaprolu mdharmesh fatze assyme terencet fpolubriaginof mukundthanki ktddaeng mhshaaban mulspace jasonknee tghelere sai-thulasiram hul1124 somair chandusekhar adavis001 usman2x m-adil denisemauldin sfermoy kallooa suyashcjoshi vickkyy henryjameslau cdash tempester08 npothier femina jxtreehouse dhwlrmt lafeillou afandylamusu ffw-chuyen-luu wufeng123456 kimtrien zfang0620ls skseth azhang2015 cambricorp joshspicer tillerdawg yammigo ebitsdev josephrocha weiqilee iamamirshabir zettacristiano indiealexh risa-10 wanghongyan jgoodwi33 johhnydinh trydalchd3-pedigree-examples's Issues
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.
Upgrade to d3 version 4.x
It would be great to have this upgraded to d3 version 4.x
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
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.
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.
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:
- Identical twins, and duplicates, are 100% identical by descent (Pihat 1.0)
- First-degree relatives are 50% IBD (Pihat 0.5)
- Second-degree relatives are 25% IBD (Pihat 0.25)
- Third-degree relatives are 12.5% equal IBD (Pihat 0.125)
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 );
}`
Add a vertical pedigree example
Marriage relationships in pedigree
How would I add nodes in your code to show a marriage relationship ?
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;
}
Example with descendants
The bowtie view with descendants on the left and ancestors on the right.
how to convert this to top to bottom
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
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?
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.
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.
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...
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.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.