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:688px;width:1240px;margin:auto;border: 1px solid #DBDBDB"></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 = {
 'title':'Usage Interactions Network',
  'CmpBrandName':'Brand N',
  //Market Share Overview input data-
    "marketData":[{name:"Brand N",value:30.67873468},{name:"Brand D",value:24.73824421},{name:"Brand U",value:7.50968358},{name:"Brand F",value:7.692077328},
                    {name:"Brand Q",value:6.684499061},{name:"Brand AE",value:6.245295669},{name:"Brand AL",value:13.222403996},{name:"Brand AM",value:1.757808046},
                   {name:"Brand AF",value:0.843581783},{name:"Brand AA",value:0.332422199},{name:"Brand AH",value:0.197385994},{name:"Brand AB",value:4.097863457}],
  
  "Linknodedata": [
    {"name":"Brand N","Link":[{"name":"Brand N","value":"N/A"},{"name":"Brand D","value":19.890913},{"name":"Brand U","value":13.960775},{"name":"Brand F","value":8.8},
                              {"name":"Brand Q","value":9.8},{"name":"Brand AE","value":3.4},{"name":"Brand AL","value":3.4},{"name":"Brand AM","value":3.4},
                              {"name":"Brand AF","value":2.3},{"name": "Brand AA","value":2.3},{"name":"Brand AH","value":2.3},{"name":"Brand AB","value":1.2}]

    },
    {"name":"Brand D","Link":[{"name":"Brand N","value":19.89},{"name":"Brand D","value":"N/A"},{"name":"Brand U","value":1.17},{"name":"Brand F","value":1.17},
                              {"name":"Brand Q","value":1.17},{"name":"Brand AE","value":0},{"name":"Brand AL","value":1.17},{"name":"Brand AM","value":1.17},
                              {"name":"Brand AF","value":0},{"name": "Brand AA","value":1.17},{"name":"Brand AH","value":1.17},{"name":"Brand AB","value":0}]

    },
    {"name":"Brand U","Link":[{"name":"Brand N","value":13.89},{"name":"Brand D","value":1.17},{"name":"Brand U","value":"N/A"},{"name":"Brand F","value":0},
                              {"name":"Brand Q","value":2.3},{"name":"Brand AE","value":2.3},{"name":"Brand AL","value":0},{"name":"Brand AM","value":0},
                              {"name":"Brand AF","value":0},{"name":...