JSFiddle - React, Tailwind, and code Playground

by Nayana Das

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<span> X axis : <select class="form-control"
							 style="width: 180px;" type="select"
							id="xaxisselect">
                                <option></option>
                                
						</select></span>
    
    
   <span> Y axis :  <select class="form-control"
							 style="width: 180px;" type="select"
							id="yaxisselect">
                                <option></option>
                                
       </select>
    <button id="xybtn" type="button" class="btn btn-primary btn-lg ">
  Submit
</button>
    </span>

<div id="maincont" >
<div id="mainchart"></div>
<!--<div id="childchart1"></div>  -->
  
</div>

CSS

svg {
  font: 10px sans-serif;
  padding: 10px;
}

.axis,
.frame {
  shape-rendering: crispEdges;
}

.axis line {
  stroke: #ddd;
}

.axis path {
  display: none;
}

.cell text {
  font-weight: bold;
  text-transform: capitalize;
  fill: black;
}

.frame {
  fill: none;
  stroke: #aaa;
}

circle {
  fill-opacity: .7;
}

circle.hidden {
  fill: #ccc !important;
}

.extent {
  fill: #000;
  fill-opacity: .125;
  stroke: #fff;
}
    
table, th, td {
    border: 1px solid black;
}
    
    .hidediv{
        display: none;
    }
    .ui-icon-closethick{
        color: black;
    }

JavaScript

var data = [
  {
    "S.No": 1,
    "Plant": "Plant 1",
    "CustomerName": "Ford",
    "Date": "01-10-2001",
    "PartNum": "A10120",
    "Amount": 100,
    "SalesPerson": "Bryan Hogan"
  },
  {
    "S.No": 2,
    "Plant": "Plant 1",
    "CustomerName": "Ford",
    "Date": "02-10-2001",
    "PartNum": "F16250",
    "Amount": 120,
    "SalesPerson": "George Moldovan"
  },
  {
    "S.No": 3,
    "Plant": "Plant 1",
    "CustomerName": "Ford",
    "Date": "03-10-2001",
    "PartNum": "G20160",
    "Amount": 150,
    "SalesPerson": "Bryan Hogan"
  },
  {
    "S.No": 4,
    "Plant": "Plant 1",
    "CustomerName": "Telco",
    "Date": "04-10-2001",
    "PartNum": "B20140",
    "Amount": 110,
    "SalesPerson": "Bryan Hogan"
  },
  {
    "S.No": 5,
    "Plant": "Plant 1",
    "CustomerName": "Delphi",
    "Date": "05-10-2001",
    "PartNum": "x85325",
    "Amount": 50,
    "SalesPerson": "George Moldovan"
  },
  {
    "S.No": 6,
    "Plant": "Plant 2",
    "CustomerName": "Telco",
    "Date": "06-10-2001",
    "PartNum": "A12105",
    "Amount": 120,
    "SalesPerson": "Cynthia Clark"
  },
  {
    "S.No": 7,
    "Plant": "Plant 2",
    "CustomerName": "Maruthi",
    "Date": "07-10-2001",
    "PartNum": "Z22155",
    "Amount": 100,
    "SalesPerson": "Cynthia Clark"
  },
  {
    "S.No": 8,
    "Plant": "Plant 2",
    "CustomerName": "Hyundai",
    "Date": "08-10-2001",
    "PartNum": "332A",
    "Amount": 150,
    "SalesPerson": "Cynthia Clark"
  },
  {
    "S.No": 9,
    "Plant": "Plant 3",
    "CustomerName": "Delphi",
    "Date": "09-10-2001",
    "PartNum": "x72016",
    "Amount": 200,
    "SalesPerson": "Thomas xu"
  },
  {
    "S.No": 10,
    "Plant": "Plant 3",
    "CustomerName": "Delphi",
    "Date": "10-10-2001",
    "PartNum": "x78523",
    "Amount": 100,
    "SalesPerson": "Thomas xu"
  }];

var headers=[];

for(var i in data){
    var key = i;
    var val = data[i];
    for(var j in val){
        var sub_key = j;
        var sub_val = val[j];
       ...