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

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<body>
<!-- Create a div where the graph will take place -->
<h2>Cryogenic Chamber</h2>
<div id="my_dataviz"></div>

<script>

    // set the dimensions and margins of the graph
    var width = 460
    var height = 460
    
    // append the svg object to the body of the page
    var svg = d3.select("#my_dataviz")
      .append("svg")
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate(40,0)");  // bit of margin on the left = 40
    
    // read json data
    d3.json("data/cryogenic-chamber.json", function(data) {
    
      // Create the cluster layout:
      var cluster = d3.cluster()
        .size([height, width - 100]);  // 100 is the margin I will have on the right side

      function children(d){
          return d.children
          // ???
      }
    
      // Give the data to this cluster layout:
      var root = d3.hierarchy(data, function(d) {
          return d.children;
      });
      cluster(root);
    
    
      // Add the links between nodes:
      svg.selectAll('path')
        .data( root.descendants().slice(1) )
        .enter()
        .append('path')
        .attr("d", function(d) {
            return "M" + d.y + "," + d.x
                    + "C" + (d.parent.y + 50) + "," + d.x
                    + " " + (d.parent.y + 150) + "," + d.parent.x // 50 and 150 are coordinates of inflexion, play with it to change links shape
                    + " " + d.parent.y + "," + d.parent.x;
                  })
        .style("fill", 'none')
        .attr("stroke", '#ccc')
    
    
      // Add a circle for each node.
      svg.selectAll("g")
          .data(root.descendants())
          .enter()
          .append("g")
          .attr("transform", function(d) {
              return "translate(" + d.y + "," + d.x + ")"
          })
          .append("circle")
            .attr("r", 7)
            .style("fill", "#69b3a2")
            .attr("stroke", "black")
            .style("stroke-width", 2)
    
    })
    
    </script>

</body>
</html>