JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<html>
<head> <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
     <div id="container" style="height:500px;width: 900px;z-index: 0;"></div>
</body>
</html>

CSS

.node {
  font: 300 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
  fill: #000;
}

/* .node:hover {
  fill: #f5900d;
} */

.link {
  stroke: steelblue;
  stroke-opacity: 0.4;
  fill: none;
  pointer-events: none;
}

.node:hover,
.node--source,
.node--target {
  font-weight: 700;
}

/* .node--source {
  fill:#f5900d ;
} */

.node--target {
  fill: #0a0a0a ;
}

.link--source,
.link--target {
  stroke-opacity: 8;
  stroke-width: 7px;
}

.link--source {
  stroke: steelblue;
}

.link--target {
  stroke: steelblue;
}
body {
    
    margin:70px;
}

.wrapper {
     width: 900;
     height: 400;
    
}
#leftcolumn, #rightcolumn {
    border: 1px solid white;
    float: left;
    min-height: 400px;
    color: white;
}
#leftcolumn {
     width: 550px;
}

#rightcolumn {
     width: 300px;
     background-color:#d6d6c2;
     color:black;
}
.footer{
        border-width: 1.5px;
        border-bottom-style:solid;
        margin-top:10px;
        padding-left:10px;
        padding-top: 5px;
        height:40px;
        background-color:lightgray;
        width: 837px;
        float: left;
      } 

.table{
    border: 5px solid white;
    border-collapse: collapse;
}
.td {
  border: 10px solid white;
    border-collapse: collapse;
    padding: 2px;
    font-size: 10px;
    font-family:arial;
}
.th{
  background-color: white;
  padding: 2px;
}

JavaScript

var Input = {
  //Market Share Overview input data-
    "marketData":[{name:"Sun Life Clarica",value:38.01349113},{name:"Manulife",value:14.77532182},{name:"Great West Life",value:11.71119225},{name:"Blue Cross",value:7.58037821},{name:"Desjardins Caisses Desjardins",value:5.83870757}
    ],
    
  "Linknodedata": [
   {"name":"Sun Life Clarica","Link":[{"name":"Sun Life Clarica","value":"N/A"},{"name":"Manulife","value":3.29},{"name":"Great West Life","value":13.21},{"name":"Blue Cross","value":1.99},{"name":"Desjardins Caisses Desjardins","value":2.02}]
   },
                         {"name":"Manulife","Link":[{"name":"Sun Life/Clarica","value":3.29},{"name":"Manulife","value":"N/A"},{"name":"Great West Life","value":3.03},{"name":"Blue Cross","value":2.18},
          {"name":"Desjardins Caisses Desjardins","value":2.20}]

    },
    {"name":"Great West Life","Link":[{"name":"Sun LifeClarica","value":3.21},{"name":"Manulife","value":3.03},{"name":"Great West Life","value":"N/A"},{"name":"Blue Cross","value":1.07},{"name":"Desjardins Caisses Desjardins","value":1.62}]
    },
                          {"name":"Blue Cross","Link":[{"name":"Sun Lifelarica","value":1.99},{"name":"Manulife","value":2.18},{"name":"Great West Life","value":1.07},{"name":"Blue Cross","value":"N/A"},
          {"name":"Desjardins Caisses Desjardins","value":0.71}]
          },

    
    {"name":"DesjardinsCaisses Desjardins","Link":[{"name":"Sun LifeClarica","value":2.02},{"name":"Manulife","value":2.20},{"name":"Great West Life","value":1.62},{"name":"Blue Cross","value":1.71},
          {"name":"Desjardins Caisses Desjardins","value":"N/A"}]
                              
     
    } 
    ],
  //  Average Market Repertoire
  "tabledata" : [
  {
    name:"Average Market Repertoire",
    value:2.863878847

  },
  {
    name:"Lotto",
    value:3.33711835,

    data:[...