JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="static-doubletree-container">
  <div class="overlay-divs">

    <div class="node-container-div root">

    </div>
  </div>
</div>

CSS

.node circle {
    cursor: pointer;
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
  .node text {
    font-size: 11px;
  }
  path.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
  }
  .node.selected circle {
    fill: green;
  }
  .static-doubletree-container {
    position: relative;
  }
  .node-container-div {
    width: 120px;
    height: 50px;
    border-radius: 25px;
    background: #ccc;
    position: absolute;
  }
  .root {
    top: 230px;
    left: 400px;
  }
  .overlay-divs {
    position: absolute;
  }

JavaScript

var nodePosition = [];

 $(document).ready(function() {

   $(".static-doubletree-container").makeStaticDoubleTree();


 });



 jQuery.fn.makeStaticDoubleTree = function() {


   var margin = {
       top: 30,
       right: 10,
       bottom: 10,
       left: 10
     },
     width = 960 - margin.left - margin.right,
     halfWidth = width / 2,
     height = 500 - margin.top - margin.bottom,
     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([height, width]);

   var diagonal = d3.svg.diagonal()
     .projection(function(d) {
       return [d.y, d.x];
     });

   var connector = diagonal;

   var calcLeft = function(d) {
     var l = d.y;
     if (!d.isRight) {
       l = d.y - halfWidth;
       l = halfWidth - l;
     }
     return {
       x: d.x,
       y: l
     };
   };

   var vis = d3.select(".static-doubletree-container").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 + ")");

   setTimeout(function() {
     var json = {
       "name": "Overall Winner",
       "winners": [{
         "name": "Winner Left 1",
         "winners": [{
           "name": "Winner Left 3"
         }, {
           "name": "Winner Left 4"
         }]
       }, {
         "name": "Winner Left 2"
       }],
       "challengers": [{
         "name": "Challenger Right 1",
         "challengers": [{
          ...