Parent Child TreeMap of Specific Id

Built with blockbuilder.org

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

<title>Collapsible Tree Example</title>

<style>

.node circle {
        fill: #fff;
        stroke: steelblue;
        stroke-width: 3px;
      }

.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;
      }

.link {
        fill: none;
        stroke: #ccc;
        stroke-width: 2px;
      }
	
    </style>

</head>

<body>
    <input type="text" id="myId" placeholder="Add mouseId&hellip;">
    <input name="button"  type="submit" value="View Hierarchy" onclick="search()">
	<script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
      
      function findFamily(data, id) {
        console.log("id: " + id);
        var mates = [];
        console.log(data[0].motherId);
        var gender = findGender(data, id);
        if(gender == "M") {
         	mates = data.filter(function(d, i) { return d.fatherId == id });
        }
        else {
          mates = data.filter(function(d, i) { return d.motherId == id });
        }
        var matesId = [];
        Object.keys(mates).forEach(function(key){
          if(matesId.indexOf(mates[key].motherId) < 0) {
            matesId.push(mates[key].motherId);
          }
        });
        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 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){
            childrenId.push(children[key].mouseId);
        });
        
        return childrenId;
      }

var margin = {top: 240, right: 20, bottom: 20, left: 120},
        width = 960 - margin.right - margin.left,
        height = 500 - margin.top - margin.bottom;

var i = 0;

var tree = d3.layout.tree()
        .size([height, width]);

var diagonal = d3.svg.diagonal()
        .projection(function(d) { return [d.x, d.y]; });

var svg = d3.select("body").append("svg")
        .attr("width", width + margin.right + margin.left)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      
      
			var id ;
      
      
			function search() {
          id = document.getElementById("myId").value;

d3.json("result2_parent_child.json", function(data) {
        
				result =  f1(data, id);         
        var dataMap = result.reduce(function(map, node) {
        	map[node.name] = node;
          return map;
        }, {});
        
				svg.selectAll("*").remove();
        var treeData = [];
        result.forEach(function(node) {
          // add to parent
          var child = dataMap[node.child];
          if (child) {
            // create child array if it doesn't exist
            (child.children || (child.children = []))
              // add node to child array
              .push(node);
          } else {
            // parent is null or missing
            treeData.push(node);
          }
        });
        root = treeData[0];
        update(root);
        findFamily1(id);
      });
      }
      
      function findFamily1(id) {
        d3.csv("colony2_updated.csv", function(data) {
          var matesId = findFamily(data, id);
          console.log("mates are: " + matesId);
             
          
          var ellipse = svg.selectAll("ellipse")
                          .data(matesId)
          								.enter()
          								.append("ellipse")
                          .attr("cx", 50)
                          .attr("cy", function(d, i) {return(i+1) * 80;})
                          .attr("rx", 10)
                          .attr("ry", 10)
                          .text(function(d) {
                            console.log("value: " + d);
                            return d.value})
          
          var text = svg.selectAll("text")
                        .data(matesId)
                        .enter()
                        .append("text");
          
          var textLabels = text
                 .attr("x", function(d) { return 10; })
                 .attr("y", function(d) { return 100; })
                 .text( function (d) { return "hello"; })

// Compute the new tree layout.
        var nodes = tree.nodes(root).reverse(),
          links = tree.links(nodes);
//         console.log(nodes);

// Normalize for fixed-depth.
        nodes.forEach(function(d) { d.y = -d.depth * 80; });

// Declare the nodes…
        var node = svg.selectAll("g.node")
          .data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter the nodes.
        var nodeEnter = node.enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { 
            return "translate(" + d.x + "," + d.y + ")"; });

nodeEnter.append("circle")
          .attr("r", 10)
          .style("fill", "#fff");

nodeEnter.append("text")
          .attr("x", function(d) { 
            return d.children || d._children ? -18 : 18; })
          .attr("dy", ".35em")
          .attr("text-anchor", function(d) { 
            return d.children || d._children ? "end" : "start"; })
          .text(function(d) { return d.name; })
          .style("fill-opacity", 1);

// Declare the links…
        var link = svg.selectAll("path.link")
          .data(links, function(d) { return d.target.id; });

// Enter the links.
        link.enter().insert("path", "g")
          .attr("class", "link")
          .attr("d", diagonal);
      }
    </script>
	
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js