D3OG

All examples By author By category About

Pragyagarg

Full window Github gist

colony4 - sankey tree

Built with blockbuilder.org

forked from Pragyagarg's block: colony4

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
        border: solid 1px blue;
    }

div {
        width: 1305px;
    }

.node {
        cursor: pointer;
    }

.node:hover {
        stroke: #3f3f3f;
        stroke-width: 4.5px;
    }

.node--leaf {
        fill: #ffffff;
    }

.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: #c9c9c9;
    }

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

</style>
<input type="text" id="myId" placeholder="Add mouseId&hellip;">
<input name="button"  type="submit" value="View Hierarchy" onclick="search()">
<div></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", 300)
    .attr("height", 500),
        g1 = svg1.append("g").attr("transform", "translate(" + diameter / 2 + "," + ((diameter / 2) - 50) + ")");

var svg2 = d3.select("div").append("svg")
    .attr('width',660)
    .attr('height',500),
        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", 1200)
      .attr("height", 500);

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;
  
    
    d3.json("colony_result4.json", function(error, root) {
        if (error) throw error;
      
//       var tooltip = d3.select("body")
//     .append("div")
//     .style("position", "absolute")
//     .style("visibility", "hidden")
//     .style("color", "black")

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) { 
          console.log("heya! d: " + d.data.name);
          var str = d.data.name.toString();
          if(str.startsWith("Gen") == false) {
            searchId(d.data.name);}
          
          if (focus !== d) zoom(d), d3.event.stopPropagation(); })
            .on("mouseover", function(d){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") : tooltip.style("top", "100px").style("left","350px");})
            .on("mouseout", function(){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]);
    });

function search() {
    
    
    var sankey = d3.sankey()
    .nodeWidth(36)
    .nodePadding(40)
    .size([700, 300]);

sankey
        .nodes(graph.nodes1)
        .links(graph.links1)
    		.layout(32);
    console.log(sankey.nodes)
console.log("here3")

// add in the links
    var link = svg3.append("g").selectAll(".link")
        .data(graph.links1)
      .enter().append("path")
        .attr("class", "link")
        .attr("d", path)
    		.style("stroke-width", function(d) { 
          console.log("dy: " + d.dy)
          return Math.max(1, d.dy); })
      .sort(function(a, b) { return b.dy - a.dy; });
    
console.log("here4")
  // add the link titles
    link.append("title")
          .text(function(d) {
          return d.source.name + " → " + 
                  d.target.name + "\n" + format(d.value); });
    console.log("link: " + link)
console.log("here6")

// add in the nodes
    var node3 = svg3.append("g").selectAll(".node3")
        .data(graph.nodes1)
      .enter().append("g")
        .attr("class", "node3")
        .attr("transform", function(d) { 
        return "translate(" + d.x + "," + d.y + ")"; })
    		.call(d3.drag()
        .subject(function(d) {
          return d;
        })
        .on("start", function() {
          this.parentNode.appendChild(this);
        })
        .on("drag", dragmove));
    console.log("node3: " + node3)
      
    
console.log("here7")

// add the rectangles for the nodes
    node3.append("rect")
        .attr("height", function(d) { return d.dy; })
        .attr("width", sankey.nodeWidth())
        .style("fill", function(d) { 
        return d.color = color(d.name.replace(/ .*/, "")); })
        .style("stroke", function(d) { 
        return d3.rgb(d.color).darker(2); })
      .append("title")
        .text(function(d) { 
        return d.name + "\n" + format(d.value); });
    
console.log("here8")
  // add in the title for the nodes
    node3.append("text")
        .attr("x", -6)
        .attr("y", function(d) { 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");
console.log("here9")
  // 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);
  }
    console.log("here10")

//     val = gen(1)
//     console.log("in search(), gender is: " + val);
//     id = document.getElementById("myId").value;
//     console.log("id: " + id)
//     searchId(id)    
  }
  
  function gen(id) {
    console.log("in gen " + id);
    var val;
    d3.csv("colony4_updated.csv", function(data) {
      console.log("here");
      val =  data.filter(function(d) { 
        return d.mouseId == id })[0].gender;
      console.log("val: " + val);

})
    console.log("data in gen: " + val);
    return val;
    
    
  }

function searchId(id) {
        // if (focus.data.id !== "node-"+id)  {
        //   console.log("came in zoom,focus: " + focus.data.id)
        //   var d = g2.selectAll("circle").filter(function(d) {return d.data.id == "node-"+id})
        //   console.log("d: " + d.data)
        //       zoom(d), d3.event.stopPropagation();
        //     }
        svg1.selectAll("*").remove();
        var g1 = svg1.append("g")
        .attr("transform",
              "translate(" + 20 + "," + 120 + ")");
        d3.json("result4_parent_child.json", function(data) {

// assign the name to each node
            treeData.each(function(d) {
                d.name = d.id;
                console.log("id: " + d.name);
            });
            // set the dimensions and margins of the diagram

var width = 150,
                height = 230;

// declares a tree layout and assigns the size
            var treemap = d3.tree()
            .size([height, width]);

//  assigns the data to a hierarchy using parent-child relationships
            var nodes1 = d3.hierarchy(treeData, function(d) {
                return d.children;
            });

// maps the node data to the tree layout
            nodes1 = treemap(nodes1);

// adds the links between the nodes
            var link1 = g1.selectAll(".link1")
            .data( nodes1.descendants().slice(1))
            .enter().append("path")
            .attr("class", "link1")
            .attr("d", function(d) {
                return "M" + d.x + "," + (100-d.y)
                    + "C" + d.x + "," + (100-(d.y + d.parent.y) / 2)
                    + " " + d.parent.x + "," +  (100-(d.y + d.parent.y) / 2)
                    + " " + d.parent.x + "," + (100-d.parent.y);
            });

// adds each node as a group
            var node1 = g1.selectAll(".node1")
            .data(nodes1.descendants())
            .enter().append("g")
            .attr("class", function(d) { 
                return "node1" + 
                    (d.children ? " node--internal" : " node--leaf"); })
            .attr("transform", function(d) { 
                return "translate(" + d.x + "," + (100 - d.y) + ")"; });

// adds the circle to the node
            node1.append("circle")
                .attr("r", 10)
                .attr("stroke-width", 2)
                .style("stroke", "steelblue")
                .attr("fill", "white");

// adds the text to the node
            node1.append("text")
                .attr("dy", ".35em")
                .attr("x", function(d) { return d.children ? -13 : 13; })
                .style("text-anchor", function(d) { 
                return d.children ? "end" : "start"; })
                .text(function(d) { return d.data.name; })
            		.style('fill', 'black');
        });

findFamily1(id);
    }
  
  
    function findFamily1(id) {
        d3.csv("colony4_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);
          
          	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); })
//                 .style("stroke", "steelblue")
                .attr("fill", "white")
                .attr("cx", 50)
                .attr("cy", function(d, i) {return(350 - (i*50));})
                .on("click", function(d) { 
           	 searchId(d);});              
                    
                mates.append("text")
                    .attr("dx", 25)
                    .attr("dy", function(d, i) {return(350 - (i*50))+5;})
                    .text(function(d) {
                  		return d });
           
            
            var i = 0,j = 0;
            matesId.forEach(function(mate){

var childrenId = findChildren(data,gender,id,mate);
              
              var children = svg1.selectAll("children")
                  			  .data(childrenId)
                          .enter().append("g")
                          .attr("class", "children");

children.append("circle")
                    .attr("r", 7)
//                 .attr("stroke-width", 2)
                .style("fill", function(d) { return findGender(data, d) == 'M' ? color1(1) : color1(2); })
//                 .style("fill", "steelblue")
                .attr("cx", function(d, i) {return 80 + (i*20);})
                .attr("cy",350 - (j*50))
                .on("click", function(d) { 
           	 searchId(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");});
               
                console.log("children of " + id + " and " + mate + " are: " + childrenId); 
              	j = j+1;
            });
        });
    }

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

</script>

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