D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    
    var data = [10, 50, 20];
    
    var canvas = d3.select("body").append("svg")
      .attr("width", 800)
      .attr("height", 800)
            .append("g")
        .attr("transform", "translate(50, 50)");
​
        var myPack = d3.pack()
        .size([400, 400]);
        
        d3.json("myTree.json", function (data) {
​
            var nodes = d3.hierarchy(data, function(d) {return d.children;});
      
      nodes = myPack(nodes);
      
      var node = canvas.selectAll(".node")
        .data(nodes.descendants())
        .enter()
        .append("g")
            .attr("class", function(d) {
            return "node" + 
                    (d.children ? " node--internal" : " node--leaf"); })
                    .attr("transform", function(d) { 
                return "translate(" + d.y + "," + d.x + ")";
          });
      
      node.append("circle")
        .attr("r", function(d) {return d.r})
        .attr("fill", function(d) { return d.children ? "#ccc": "blue"})
                .attr("opacity", 0.25);
      
            node.append("text")
            .attr("dy", ".35em")
            //.attr("x", function(d) { return d.cx })
            .style("text-anchor", "middle" )
            .text(function(d) { return d.children ? "" : d.data.name; });
      
    })
    
  </script>
</body>
​
    