JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="holder">
  <div id="viz" class="familychart"></div>
</div>

CSS

.familychart .link {
  fill: none;
  stroke: #000;
}

.familychart .sibling {
  fill: none;
  stroke: blue;
}

.familychart .border {
  fill: none;
  shape-rendering: crispEdges;
  stroke: #aaa;
}

.familychart .node {
  stroke: red;
  fill: white;
}

JavaScript

//userImage: require('../../images/-tchaikovsky.jpg')
		//https://bl.ocks.org/mbostock/4062085
		//http://bl.ocks.org/d3noob/5015397

		var margin = {
			top: 50,
			right: 10,
			bottom: 50,
			left: 10
		},
		width = 840,
		height = 600;

		var kx = function(d) {
			return d.x - 20;
		};
		var ky = function(d) {
			return d.y - 10;
		};
		//thie place the text x axis adjust this to center align the text
		var tx = function(d) {
			return d.x - 3;
		};
		//thie place the text y axis adjust this to center align the text
		var ty = function(d) {
			return d.y + 3;
		};

       //make an SVG

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

       var smallRadius = 20;

       var patternsSvg = svg.append('g')
         .attr('class', 'patterns');

				var pathHolder = svg.append("g")
         .attr("class", "pathholder");

       var userHolder = svg.append("g")
         .attr("class", "userholder");
         
       //My JSON note the 
       //no_parent: true this ensures that the node will not be linked to its parent
       //hidden: true ensures that the nodes is not visible.
       var root = {
         name: "",
         id: 1,
         hidden: true,
         userName: "",
         children: [{
			name: "Q",
			id: 16,
			no_parent: true,
			userName: "Henry VII",
			userImage: 'https://static01.nyt.com/images/2015/10/25/t-magazine/25tmag-11well_rihanna-t_CA0/25tmag-11well_rihanna-t_CA0-articleLarge-v2.jpg',
			birthDate: "1457",
			deathDate: "1509"
         }, {
           name: "",
           id: 2,
           no_parent: true,
           hidden: true,
           children: [
           	{
				name: "J",
				id: 12,
				userName: "Prince Arthur",
				userImage:...