Simple Tree Diagram - Vertical

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	   .node circle {
		  fill: #fff;
		  stroke: steelblue;
		  stroke-width: 3px;
		}

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

var data = { "name": "Parent", "children": [ 
	{ "name": "Child A", "children": [ { "name": "Grandchild" } ] }, 
	{ "name": "Child B", } 
	] };

var width = 960;
var height = 500;

margin = {left: 100, top: 100, right: 50, bottom: 50}

var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
	  
var g = svg.append("g").attr('transform','translate('+ margin.left +','+ margin.right +')');

var root = d3.hierarchy(data);
	  
var tree = d3.tree()
    .size([width-margin.left-margin.right,height-margin.top-margin.bottom]);

var link = g.selectAll(".link")
    .data(tree(root).links())
    .enter().append("path")
      .attr("class", "link")
      .attr("d", d3.linkVertical()
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; }));

var node = g.selectAll(".node")
    .data(root.descendants())
    .enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

node.append("circle")
      .attr("r", 2.5);
	  
  node.append("text")
     .text(function(d) { return d.data.name; })
	 .attr('y',-10)
	 .attr('x',-10)
	 .attr('text-anchor','middle');
</script>

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