JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chart"></div>

CSS

.node circle {
  cursor: pointer;
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}
 
.node text {
  font: 10px sans-serif;
}
 
path.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

JavaScript

var margin = {top: 30, right: 10, bottom: 10, left: 10},
    width = 500 - margin.left - margin.right,
    halfWidth = width / 2,
    height = 960 - margin.top - margin.bottom,
    halfHeight = height / 2,
    i = 0,
    duration = 500,
    root;
 
var getChildren = function(d){
      var a = [];
      if(d.winners) for(var i = 0; i < d.winners.length; i++){
        d.winners[i].isRight = false;
        d.winners[i].parent = d;
        a.push(d.winners[i]);
      }
      if(d.challengers) for(var i = 0; i < d.challengers.length; i++){
        d.challengers[i].isRight = true;
        d.challengers[i].parent = d;
        a.push(d.challengers[i]);
      }
      return a.length?a:null;
    }
    ;
 
var tree = d3.layout.tree()
    .size([width, height])
    ;
 
var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });
var elbow = function (d, i){
      var source = calcLeft(d.source);
      var target = calcLeft(d.target);
      var hy = (target.y-source.y)/2;
      if(d.isRight) hy = -hy;
      return "M" + source.x + "," + source.y
             + "V" + (source.y+hy)
             + "H" + target.x + "V" + target.y;
    };
var connector = elbow;
 
var calcLeft = function(d){
  var l = d.y;
  if(!d.isRight){
    l = height - d.y;
  }
  return {x : d.x, y : l};
};
 
var vis = d3.select("#chart").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
var toArray = function(item, arr){
  arr = arr || [];
  var i = 0, l = item.children?item.children.length:0;
  arr.push(item);
  for(; i < l; i++){
    toArray(item.children[i], arr);
  }
  return arr;
};
 
function update(source) {
  // Compute the new tree layout.
  var nodes = toArray(source);
 
  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180 + halfHeight; });
 
  // Update the nodes…
  var node =...