Built with blockbuilder.org
xxxxxxxxxx
<meta charset="utf-8">
<style>
svg {
border: solid 1px black;
}
div {
width: 1305px;
}
.node {
cursor: pointer;
}
.node:hover {
stroke: #3f3f3f;
stroke-width: 4.5px;
}
.node--leaf {
fill: #ffffff;
}
.children:hover {
stroke: #3f3f3f;
stroke-width: 2.5px;
}
.label {
font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
.label,
.node--root,
{
pointer-events: none;
}
#graphic {
background-color: #424242;
}
.node text { font: 12px sans-serif; }
.node--internal text {
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.link1 {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
.link {
fill: none;
stroke: #000;
stroke-opacity: .2;
}
.link:hover {
stroke-opacity: .5;
}
text {
font-family: sans-serif;
}
.bar {
fill: midnightblue;
}
.bar:hover {
fill: pink;
}
</style>
<input type="text" id="myId" placeholder="Add mouseId…">
<input name="button" type="submit" value="View Hierarchy" onclick="search()">
<div id = "chart"></div>
<div id = "genNo"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="sankey.js"></script>
<script>
var svg1 = d3.select("div").append("svg")
.attr("width", 550)
.attr("height", 750);
var svg2 = d3.select("div").append("svg")
.attr('width',750)
.attr('height',750),
margin = 300,
diameter = svg2.attr("width"),
g2 = svg2.append("g").attr("transform", "translate(" + (diameter / 2)+ "," + ((diameter / 2) - 50) + ")");
var svg3 = d3.select("div").append("svg")
.attr("width", 430)
.attr("height", 300);
var svg4 = d3.select("div").append("svg")
.attr("width", 435)
.attr("height", 300);
var svg5 = d3.select("div").append("svg")
.attr("width", 433)
.attr("height", 300);
var color = d3.scaleLinear()
.domain([-1, 5])
.range(["hsl(204,81%,96%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var color1 = d3.scaleLinear()
.domain([1, 2])
.range(["hsl(213,92%,63%)", "hsl(2,80%,74%)"])
.interpolate(d3.interpolateHcl);
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("visibility", "hidden")
.style("color", "black")
var focus,nodes,node,circle;
svg1.selectAll("*").remove();
svg2.selectAll("*").remove();
svg3.selectAll("*").remove();
var margin = 300,
diameter = svg2.attr("width"),
g2 = svg2.append("g").attr("transform", "translate(" + (diameter / 2)+ "," + ((diameter / 2) - 50) + ")");
d3.json("colony_result4.json", function(error, root) {
if(error) {
console.log("in error");
throw error;
}
circlePacking(root)
});
function circlePacking(root) {
root = d3.hierarchy(root)
.sum(function(d) { return d.size; })
.sort(function(a, b) { return b.value - a.value; });
var pack = d3.pack()
.size([diameter, diameter])
.padding(10)
focus = root,
nodes = pack(root).descendants();
circle = g2.selectAll(".circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.attr("id", function(d) {
return "node-" + d.data.name})
.style("fill", function(d) { return d.children ? color(d.depth) : d.data.gender == 'M' ? color1(1) : color1(2); })
.on("click", function(d) {
var str = d.data.name.toString();
if(str.startsWith("Gen") == false) {
searchId2(d.data.name);}
if (focus !== d) zoom(d), d3.event.stopPropagation(); })
.on("mouseover", function(d){
if(!d.children) {
return tooltip.text(d.data.name).style("visibility", "visible");}})
.on("mousemove", function(d){return !d.children ? tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px") : printGen(d.data.name);})
.on("mouseout", function(){
removeGen();
return tooltip.style("visibility", "hidden");});
node = g2.selectAll("circle");
svg2
.style("background", color(-1))
.on("click", function() { zoom(root); });
zoomTo([root.x, root.y, root.r * 2 + margin]);
}
d3.csv("colony4_updated.csv", function(dataInfo) {
// console.log("dataInfo: " + JSON.stringify(dataInfo[0]));
showChildrenStats()
showGenderStats()
showAgeStats()
function filterNodes(num,value) {
console.log("num: " + num)
console.log("value: " + value)
var list = []
// gender filteration by svg4
if(num==4) {
// {
dataInfo.filter(function(d, i) {
if(d.gender == "M" && value == "male") list.push( d.mouseId);
else if(d.gender == "F" && value == "female") list.push( d.mouseId);
else if(d.gender == "NA") list.push( d.mouseId);
});
}
//filteration via num of children in svg3
else if(num == 3) {
dataInfo.filter(function(d, i) {
if(value == "<0" && d.numberOfChildren == 0) list.push( d.mouseId);
else if (value == "0-5" && d.numberOfChildren < 5 && d.numberOfChildren > 0) list.push( d.mouseId);
else if (value == "5-10" && d.numberOfChildren < 10 && d.numberOfChildren > 5) list.push( d.mouseId);
else if(d.numberOfChildren > 10) list.push( d.mouseId);
});
}
//filteration via age in svg5
else if(num == 5) {
dataInfo.filter(function(d, i) {
if(d.dodYear == -1) dod = new Date();
else dod = new Date(d.dodYear, d.dodMonth, d.dodDay);
dob = new Date(d.dobYear, d.dobMonth, d.dobDay);
age = daysBetween(dob,dod)
if (value == "0-100" && age < 100) {
list.push( d.mouseId); }
else if (value == "100-300" && age > 100 && age <= 300) {
list.push( d.mouseId);
}
else if (value == "300-500" && age > 300 && age <= 500) {
list.push( d.mouseId);
}
else if(value == ">500" && age > 500){
list.push( d.mouseId);
}
});
}
return list;
}
function showGenderStats() {
var margin = {top: 60, right: 0, bottom: 0, left: 0};
var width = 435-margin.left-margin.right;
var height = 300-margin.top - margin.bottom;
var fullWidth = width + margin.left+margin.right;
var fullHeight = height+margin.top+margin.bottom;
var radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal(d3.schemeCategory20b);
var g = svg4.append("g")
.attr("transform","translate(" + (fullWidth / 2) + "," + (fullHeight / 2) +")")
.attr("class","chartGroup");
var donutWidth = ( height / 3);
var arc = d3.arc()
.innerRadius(donutWidth)
.outerRadius(radius);
var pie = d3.pie()
.value(function(d) { return d.count})
.sort(null);
// var tooltip4 = d3.select('#chart')
// .append('div')
// .attr('class','tooltip4')
var tooltip4 = d3.select("body")
.append("div")
.style("position", "absolute")
.style("visibility", "hidden")
.style("color", "black")
tooltip4.append('svg4')
.attr('class','label');
tooltip4.append('svg4')
.attr('class', 'count');
tooltip4.append('svg4')
.attr('class','percent');
var dataset = findGenderStats();
// console.log("dataSet gender: " + JSON.stringify(dataset))
dataset.forEach(function(d) {
d.count = +d.count;
d.enabled = true;
});
var path = g.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d',arc)
.attr('fill', function(d,i){
return color(d.data.label);
})
.each(function(d){this._current = d;});
// path.on('onclick', function(d) {
// console.log("here")
// alert("hey")
// });
path.on('mousemove', function(d){
var xposSub = document.getElementById("chart").getBoundingClientRect().left;
var xpos = d3.event.x - xposSub + 20
var ypos = d3.event.y
tooltip4.style("left" ,xpos + "px")
tooltip4.style("top", ypos + "px")
var total = d3.sum(dataset.map(function(d){
return (d.enabled) ? d.count : 0;
}));
var percent = Math.round(10000 * d.data.count / total) / 100;
tooltip4.select('.label').html(d.data.label);
tooltip4.select('.count').html(d.data.count);
tooltip4.select('.percent').html(percent + '%');
tooltip4.style('display', 'block');
});
path.on('mouseout', function(d){
tooltip4.style('display','none');
});
var legendRectSize = 18;
var legendSpacing = 10;
var legend = g.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class','legend')
.attr('transform', function(d,i){
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = -2 * legendRectSize;
var vert = i * height-offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width',legendRectSize)
.attr('height',legendRectSize)
.style('fill',color)
.style('stroke',color)
.on('click', function(label){
filteredNodes = filterNodes(4,label)
console.log("filteredData in svg4: " + filteredNodes)
// var rect = d3.select(this);
// var enabled = true;
// var totalEnabled = d3.sum(dataset.map(function(d) {
// return (d.enabled) ? 1 : 0;
// }));
// if (rect.attr('class') === 'disabled') {
// rect.attr('class', '');
// } else {
// if (totalEnabled < 2) return;
// rect.attr('class', 'disabled');
// enabled = false;
// }
// pie.value(function(d) {
// if (d.label === label) d.enabled = enabled;
// return (d.enabled) ? d.count : 0;
// });
// path = path.data(pie(dataset));
// path.transition()
// .duration(750)
// .attrTween('d', function(d) {
// var interpolate = d3.interpolate(this._current, d);
// this._current = interpolate(0);
// return function(t) {
// return arc(interpolate(t));
// };
// });
});
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.attr('style','font-size: 18')
.attr('alignment-baseline','middle')
.text(function(d) { return d; });
// });
}
function showAgeStats() {
var margin = { top: 20, right: 20, bottom: 30, left: 40 },
x = d3.scaleBand().padding(0.1),
y = d3.scaleLinear(),
theData = undefined;
var g = svg5.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.append("g")
.attr("class", "axis axis--x");
g.append("g")
.attr("class", "axis axis--y");
g.append("text")
.attr("x", 380)
.attr("y", 0)
.attr("text-anchor", "end")
.text("Age Stats");
function draw() {
var bounds = svg5.node().getBoundingClientRect(),
width = bounds.width - margin.left - margin.right,
height = bounds.height - margin.top - margin.bottom;
x.rangeRound([0, width]);
y.rangeRound([height, 0]);
var color = d3.scaleOrdinal(d3.schemeCategory20b);
g.select(".axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.select(".axis--y")
.call(d3.axisLeft(y));
var bars = g.selectAll(".bar")
.data(theData)
// .style("fill", function (d) { return color(d.label); });
// ENTER
bars
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) { return x(d.label); })
.attr("y", function (d) { return y(d.count); })
.attr("width", x.bandwidth())
.attr("height", function (d) { return height - y(d.count); });
// UPDATE
bars.attr("x", function (d) { return x(d.label); })
.attr("y", function (d) { return y(d.count); })
.attr("width", x.bandwidth())
.attr("height", function (d) { return height - y(d.count); });
// EXIT
bars.exit()
.remove();
var options = ["<0", "0-5", "5-10",">10"];
var legend = svg3.selectAll(".legend")
.data(options.slice())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(-35," + (i+1) * 25 + ")"; });
legend.append("rect")
.attr("x", width + 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", "midnightblue")
.on('click', function(label){
filteredNodes = filterNodes(3,label)
console.log("filteredData in svg5: " + filteredNodes)
});;
legend.append("text")
.attr("x", width + 40)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d) { return d; });
}
function loadData() {
theData = findAgeStats()
// console.log("the data: " + JSON.stringify(theData))
x.domain(theData.map(function (d) { return d.label; }));
y.domain([0, d3.max(theData, function (d) { return d.count; })]);
draw();
}
// window.addEventListener("resize", draw);
loadData();
}
function showChildrenStats() {
var margin = { top: 20, right: 20, bottom: 30, left: 40 },
x = d3.scaleBand().padding(0.1),
y = d3.scaleLinear(),
theData = undefined;
var g = svg3.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.append("g")
.attr("class", "axis axis--x");
g.append("g")
.attr("class", "axis axis--y");
g.append("text")
.attr("x", 350)
.attr("y", 0)
.attr("text-anchor", "end")
.text("Num of children Stats");
function draw() {
var bounds = svg3.node().getBoundingClientRect(),
width = bounds.width - margin.left - margin.right,
height = bounds.height - margin.top - margin.bottom;
x.rangeRound([0, width]);
y.rangeRound([height, 0]);
g.select(".axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.select(".axis--y")
.call(d3.axisLeft(y));
var bars = g.selectAll(".bar")
.data(theData);
// ENTER
bars
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) { return x(d.label); })
.attr("y", function (d) { return y(d.count); })
.attr("width", x.bandwidth())
.attr("height", function (d) { return height - y(d.count); });
// UPDATE
bars.attr("x", function (d) { return x(d.label); })
.attr("y", function (d) { return y(d.count); })
.attr("width", x.bandwidth())
.attr("height", function (d) { return height - y(d.count); });
// EXIT
// bars.exit()
// .remove();
var options = ["0-100", "100-300", "300-500",">500"];
var legend = svg5.selectAll(".legend")
.data(options.slice())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(-35," + (i+1) * 25 + ")"; });
legend.append("rect")
.attr("x", width + 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", "midnightblue")
.on('click', function(label){
filteredNodes = filterNodes(5,label)
console.log("filteredData in svg3: " + filteredNodes)
});;
legend.append("text")
.attr("x", width + 40)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d) { return d; });
}
function loadData() {
theData = findChildrenStats()
// console.log("the data: " + JSON.stringify(theData))
x.domain(theData.map(function (d) { return d.label; }));
y.domain([0, d3.max(theData, function (d) { return d.count; })]);
draw();
}
// window.addEventListener("resize", draw);
loadData();
}
function daysBetween ( date1, date2 ) {
//Get 1 day in milliseconds
var one_day=1000*60*60*24;
// Convert both dates to milliseconds
var date1_ms = date1.getTime();
var date2_ms = date2.getTime();
// Calculate the difference in milliseconds
var difference_ms = date2_ms - date1_ms;
// Convert back to days and return
return Math.round(difference_ms/one_day);
}
function findAgeStats() {
var zero = 0,one=0,three=0,five=0,more=0;
var Jan1st2015 = new Date(2015, 1, 1);
var today= new Date();
dataInfo.forEach(function(d) {
var dod;
if(d.dodYear == -1) {
dod = new Date();
}
else {
dod = new Date(d.dodYear, d.dodMonth, d.dodDay);
}
var dob = new Date(d.dobYear, d.dobMonth, d.dobDay);
var age = daysBetween(dob, dod);
// console.log("age: " + age)
if(age < 100) one++;
else if(age < 300) three++;
else if(age < 500) five++;
else more++;
});
// console.log("result: " + zero + "\t" + one + "\t" + three + "\t" + five+ "\t" + more)
var result = []
var o = Object.assign(
{ label: "0-100" },
{ count: one }
);
var t = Object.assign(
{ label: "100-300" },
{ count: three }
);
var f = Object.assign(
{ label: "300-500" },
{ count: three }
);
var m = Object.assign(
{ label: ">500" },
{ count: more }
);
result.push(o);
result.push(t);
result.push(f);
result.push(m);
return result;
}
function findChildrenStats() {
var result = []
var zero = 0, five = 0, ten = 0, more = 0;
dataInfo.forEach(function(d) {
if(d.numberOfChildren == 0) zero++;
else if(d.numberOfChildren < 5) five++;
else if(d.numberOfChildren < 10) ten++;
else more++;
});
var z = Object.assign(
{ label: "0" },
{ count: zero }
);
var f = Object.assign(
{ label: "0-5" },
{ count: five }
);
var t = Object.assign(
{ label: "5-10" },
{ count: ten }
);
var m = Object.assign(
{ label: ">10" },
{ count: more }
);
result.push(z);
result.push(f);
result.push(t);
result.push(m);
return result;
}
function findGenderStats() {
var result = []
var maleCount = 0, femaleCount = 0, otherCount = 0;
dataInfo.forEach(function(d) {
if(d.gender == 'M') maleCount++;
else if(d.gender == 'F') femaleCount++;
else otherCount++;
});
var male = Object.assign(
{ label: "male" },
{ count: maleCount }
);
var female = Object.assign(
{ label: "female" },
{ count: femaleCount }
);
var other = Object.assign(
{ label: "other" },
{ count: otherCount }
);
result.push(male);
result.push(female);
result.push(other);
return result;
}
});
function printGen(val) {
document.getElementById("genNo").innerHTML = val;
}
function removeGen(val) {
document.getElementById("genNo").innerHTML = "";
}
function zoom(d) {
var focus0 = focus; focus = d;
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", function(d) {
var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
return function(t) { zoomTo(i(t)); };
});
}
function zoomTo(v) {
var k = (diameter / v[2] ); view = v;
node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
circle.attr("r", function(d) { return d.r * k; });
}
function search() {
id = document.getElementById("myId").value;
searchId2(id)
}
function searchId2(id) {
svg1.selectAll("*").remove();
var sankey = d3.sankey()
.nodeWidth(36)
.nodePadding(40)
.size([500, 200]);
var path = sankey.link();
d3.queue()
.defer(d3.csv, "colony4_updated.csv")
.defer(d3.json, "result4_parent_child.json")
.await(function(error,data10,data){
var graph = f2(data, id);
// console.log("result: " + graph);
// console.log("num of nodes: " + graph.nodes1.length);
// console.log("num of links: " + graph.links1.length);
color = d3.scaleOrdinal(d3.schemeCategory20);
var nodeMap = {};
graph.nodes1.forEach(function(x) { nodeMap[x.name] = x; });
graph.links1 = graph.links1.map(function(x) {
return {
source: nodeMap[x.source],
target: nodeMap[x.target],
value: x.value
};
});
sankey
.nodes(graph.nodes1)
.links(graph.links1)
.layout(32);
// console.log(sankey.nodes)
// add in the links
var link = svg1.append("g").selectAll(".link")
.data(graph.links1)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke-width", function(d) {
return Math.max(1, d.dy); })
.sort(function(a, b) { return b.dy - a.dy; });
// add the link titles
link.append("title")
.text(function(d) {
return d.source.name + " → " +
d.target.name; });
// add in the nodes
var node3 = svg1.append("g").selectAll(".node3")
.data(graph.nodes1)
.enter().append("g")
.attr("class", "node3")
.attr("transform", function(d) {
if(graph.links1.length == 0) {
return "translate(0,0)";
}
return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.drag()
.subject(function(d) {
return d;
})
.on("start", function() {
this.parentNode.appendChild(this);
})
.on("drag", dragmove))
.on("click", function(d) {
});;
// add the rectangles for the nodes
node3.append("rect")
.attr("height", function(d) {
if(graph.links1.length == 0) {
return 130;
}
return d.dy; })
.attr("width", sankey.nodeWidth())
.style("fill", function(d) { return findGender(data10, d.name) == 'M' ? color1(1) : color1(2); })
.style("stroke", function(d) {
return d3.rgb(d.color).darker(1); })
.on("click", function(d) {
searchId2(d.name);});
// add in the title for the nodes
node3.append("text")
.attr("x", -6)
.attr("y", function(d) {
if(graph.links1.length == 0) {
return 65;
}
return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function(d) {
return d.name; })
.filter(function(d) { return d.x < 700 / 2; })
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
// the function for moving the nodes
function dragmove(d) {
d3.select(this)
.attr("transform",
"translate("
+ d.x + ","
+ (d.y = Math.max(
0, Math.min(300 - d.dy, d3.event.y))
) + ")");
sankey.relayout();
link.attr("d", path);
}
findFamily2(id,data10);
});
}
function gen(id,data) {
// console.log("in gen " + id);
var val;
d3.csv("colony4_updated.csv", function(data) {
val = data.filter(function(d) {
return d.mouseId == id })[0].gender;
})
return val;
}
function findFamily2(id, data) {
// d3.csv("colony2_updated.csv", function(data) {
var gender = findGender(data, id);
console.log("gender of node: " + gender)
var matesId = findFamily(data, id);
console.log("mates are: " + matesId);
svg1.append("text")
.attr("x", 80)
.attr("y", 300)
.attr("text-anchor", "end")
.text("Mates");
svg1.append("text")
.attr("x", 230)
.attr("y", 300)
.attr("text-anchor", "end")
.text("Children");
var mates = svg1.selectAll("mates")
.data(matesId)
.enter().append("g")
.attr("class", "mates");
mates.append("circle")
.attr("r", 10)
.attr("stroke-width", 2)
.style("stroke", function(d) { return findGender(data,d) == 'M' ? color1(1) : color1(2); })
.attr("fill", "white")
.attr("cx", 75)
.attr("cy", function(d, i) {return(350 - (i*50));})
.on("click", function(d) {
searchId2(d);});
mates.append("text")
.attr("dx", 35)
.attr("dy", function(d, i) {return(350 - (i*50))+5;})
.text(function(d) {
return d });
var i = 0,j = 0, k = 0;
matesId.forEach(function(mate){
var childrenId = findChildren(data,gender,id,mate);
console.log("female childre are: " + childrenId.childrenFemale)
console.log("male children are: " + childrenId.childrenMale)
var children = svg1.selectAll("children")
.data(childrenId.childrenFemale)
.enter().append("g")
.attr("class", "children");
children.append("circle")
.attr("r", 7)
.style("fill", function(d) { return findGender(data, d) == 'M' ? color1(1) : color1(2); })
.attr("cx", function(d, i) {return 180 + (i*20);})
.attr("cy",350 - (j*50))
.on("click", function(d) {
searchId2(d);})
.on("mouseover", function(d){return tooltip.text(d).style("visibility", "visible");})
.on("mousemove", function(d){return tooltip.style("top", (event.pageY-20)+"px").style("left",(event.pageX)+"px");;})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
var children = svg1.selectAll("children")
.data(childrenId.childrenMale)
.enter().append("g")
.attr("class", "children");
children.append("circle")
.attr("r", 7)
.style("fill", function(d) { return findGender(data, d) == 'M' ? color1(1) : color1(2); })
.attr("cx", function(d, i) {return 180 + (i*20);})
.attr("cy",350 - (j*50) + 20)
.on("click", function(d) {
searchId2(d);})
.on("mouseover", function(d){return tooltip.text(d).style("visibility", "visible");})
.on("mousemove", function(d){return tooltip.style("top", (event.pageY-20)+"px").style("left",(event.pageX)+"px");;})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
j = j+1;
});
// });
}
function findFamily(data, id) {
var mates = [];
var gender = findGender(data, id);
var matesId = [];
if(gender == "M") {
mates = data.filter(function(d, i) { return d.fatherId == id });
// console.log("mates are: " + mates);
if(mates.length > 0) {
Object.keys(mates).forEach(function(key){
// console.log("mates are: " + mates);
if(matesId.indexOf(mates[key].motherId) < 0) {
matesId.push(mates[key].motherId);
}
});
}
}
else {
mates = data.filter(function(d, i) { return d.motherId == id });
// console.log("mates are: " + mates);
if(mates.length > 0) {
Object.keys(mates).forEach(function(key){
// console.log("mates are: " + mates);
if(matesId.indexOf(mates[key].fatherId) < 0) {
matesId.push(mates[key].fatherId);
}
});
}
}
return matesId;
}
function findGender(data, id) {
return data.filter(function(d) { return d.mouseId == id })[0].gender;
}
function findChildren(data, gender, id, mate) {
var childrenId = [];
var childrenMale = [];
var childrenFemale = [];
var children = [];
if(gender == "M") {
// console.log("male")
children = data.filter(function(d, i) { return d.fatherId == id && d.motherId == mate});
}
else {
children = data.filter(function(d, i) { return d.motherId == id && d.fatherId == mate})
}
Object.keys(children).forEach(function(key){
if(children[key].gender == 'M') {
childrenMale.push(children[key].mouseId);
}
else if(children[key].gender == 'F') {
childrenFemale.push(children[key].mouseId);
}
});
// console.log("Inside children function, male children: " + childrenMale);
// console.log("Inside children function, female children: " + childrenFemale);
return {
childrenMale: childrenMale,
childrenFemale: childrenFemale,
};
}
function f1(data, id) {
var data1 = [];
var list = [];
list.push(id);
while(list.length > 0) {
Object.keys(data).forEach(function(key){
if(data[key]["parent"] == list[0]) {
list.push(data[key]["name"])
data1.push(data[key])
// console.log("adding data: " + data[key]["name"] + "and parent" + data[key]["parent"])
}
});
list.shift();
}
data1.push( {"name": id, "parent": null})
return data1;
}
function f2(data, id) {
// console.log("1, id: " + id);
var data1 = {};
var list = [];
var uniqueIds = [];
var uniqueLinks = [];
var nodeList = [];
var linkList = [];
list.push(id);
uniqueIds.push(id);
while(list.length > 0) {
Object.keys(data).forEach(function(key){
if(data[key]["parent"] == list[0]) {
list.push(data[key]["name"])
var dataNode = {};
var dataLink = {};
if(!uniqueIds.includes(data[key]["name"])) {
uniqueIds.push(data[key]["name"])
dataNode["name"] = data[key]["name"];
nodeList.push(dataNode);
}
var s = data[key]["name"] <= data[key]["parent"] ? data[key]["name"].concat(data[key]["parent"]) : data[key]["parent"].concat(data[key]["name"]);
if(!uniqueLinks.includes(s)) {
dataLink["source"] = data[key]["name"];
dataLink["target"] = data[key]["parent"];
dataLink["value"] = "1";
uniqueLinks.push(s);
linkList.push(dataLink);
// map.set(data[key]["name"],data[key]["parent"])
}
// console.log("datanode: " + dataNode["name"]);
// console.log("datalink: " + dataLink["source"] + ", " + dataLink["target"] + ", " + dataLink["value"]);
}
});
list.shift();
}
nodeList.push( {"name": id})
data1 = Object.assign(
{ nodes1: nodeList },
{ links1: linkList }
);
// console.log("nodeList: " + JSON.stringify(nodeList));
// console.log("linkList: " + JSON.stringify(linkList));
// console.log("data1: " + JSON.stringify(data1));
return data1;
}
</script>
https://d3js.org/d3.v4.min.js