tree example

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .node {
      fill: steelblue;
      stroke: none;
    }

.link {
      fill: none;
      stroke: #ccc;
      stroke-width: 1px;
    }
  </style>
</head>

<body>
  <script>
 
    var width = 960, height = 500;
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
    var chart = svg.append("g").attr("transform", "translate(5,5)")
    chart.append("g").attr("class", "links")
    chart.append("g").attr("class", "nodes")
    
		d3.json("nodes.json", function(err, data){
    	var root = d3.hierarchy(data)
			var treeLayout = d3.tree();
      treeLayout.size([400, 200])
      
      treeLayout(root);

d3.select('svg g.nodes')
        .selectAll('circle.node')
        .data(root.descendants())
        .enter()
        .append('circle')
        .classed('node', true)
        .attr('cx', function(d) {return d.x;})
        .attr('cy', function(d) {return d.y;})
        .attr('r', 4);

// Links
      d3.select('svg g.links')
        .selectAll('line.link')
        .data(root.links())
        .enter()
        .append('line')
        .classed('link', true)
        .attr('x1', function(d) {return d.source.x;})
        .attr('y1', function(d) {return d.source.y;})
        .attr('x2', function(d) {return d.target.x;})
        .attr('y2', function(d) {return d.target.y;});
    })

</script>
</body>

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