JSFiddle - React, Tailwind, and code Playground

by Serhii Matrunchyk

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: 'https://static01.nyt.com/images/2015/10/25/t-magazine/25tmag-11well_rihanna-t_CA0/25tmag-11well_rihanna-t_CA0-articleLarge-v2.jpg',
        birthDate: "1486",
        deathDate: "1502"
      },
      {
        name: "L",
        id: 13,
        userName: "King Henry VIII",
       ...