Old school D3 from simpler times

All examples By author By category About

santiagogaray

Full window Github gist

Pack

Built with blockbuilder.org

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

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