D3OG

All examples By author By category About

Pragyagarg

Full window Github gist

colony4

Built with blockbuilder.org

<!DOCTYPE html>
<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>

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()

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');

//       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);

// 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 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 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){

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

}

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