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 black"></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:"Lotto",value:38.01349113},{name:"VikingLotto",value:14.77532182},{name:"Flax",value:11.71119225},{name:"Pantelotteriet",value:7.58037821},
                  {name:"Joker",value:5.838707574},{name:"Extra",value:4.8070079},{name:"Eurojackpot",value:4.397419319}/* ,{name:"Oddsen",value:3.04471913},
                  {name:"Tipping",value:1.73642643},{name:"Nabolaget",value:1.72924447},{name:"Norsk Rikstoto",value:1.68846466},{name:"Unibet",value:1.40543087} */],
  
  "Linknodedata": [
    {"name":"Lotto","Link":[{"name":"Lotto","value":"N/A"},{"name":"VikingLotto","value":45.00},{"name":"Flax","value":14.74},{"name":"Pantelotteriet","value":6.61},
                              {"name":"Joker","value":33.50},{"name":"Extra","value":17.81},{"name":"Eurojackpot","value":19.92}/* ,{"name":"Oddsen","value":7.01},{"name":"Tipping","value":6.52},
                              {"name": "Nabolaget","value":9.41},{"name":"Norsk Rikstoto","value":4.23},{"name":"Unibet","value":1.38} */]

    },
    {"name":"VikingLotto","Link":[{"name":"Lotto","value":45.00},{"name":"VikingLotto","value":"N/A"},{"name":"Flax","value":10.43},{"name":"Pantelotteriet","value":4.75},
                              {"name":"Joker","value":24.13},{"name":"Extra","value":14.37},{"name":"Eurojackpot","value":19.47}/* ,{"name":"Oddsen","value":5.43},{"name":"Tipping","value":5.35},
                              {"name": "Nabolaget","value":7.50},{"name":"Norsk Rikstoto","value":3.56},{"name":"Unibet","value":1.22} */]

    },
     {"name":"Flax","Link":[{"name":"Lotto","value":14.74},{"name":"VikingLotto","value":10.43},{"name":"Flax","value":"N/A"},{"name":"Pantelotteriet","value":3.90},
                              {"name":"Joker","value":8.45},{"name":"Extra","value":5.61},{"name":"Eurojackpot","value":5.83}/*...