JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.js"></script>

    <body>
      <div id="buttons">
        <button id="data1">Next</button>
      </div>
    </body>

CSS

.axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }

JavaScript

function scatter(dataset,w,h,padding)
            {
                  var xScale = d3.scale.linear().domain(
                                                          [0,
                                                              d3.max(
                                                                      dataset, function(d) { return d[0]; }
                                                                  )
                                                          ]
                                                      )
                                                  .range([padding, w - padding * 2]);

                  var yScale = d3.scale.linear().domain(
                                                          [0,
                                                              d3.max(
                                                                      dataset, function(d) { return d[1]; }
                                                                  )
                                                          ]
                                                      )
                                                 .range([h - padding, padding]);


                  var xAxis = d3.svg.axis()
                                .scale(xScale)
                                .orient("buttom")
                                .ticks(5);

                              //Define Y axis
                  var yAxis = d3.svg.axis()
                                    .scale(yScale)
                                    .orient("left")
                                    .ticks(5);

                  var svg = d3.select("body")
                              .append("svg")
                              .attr("width", w)
                              .attr("height", h);
                  // svg.append("g")
                  //   .attr("class", "axis")  //Assign "axis" class
                  //   .call(xAxis);
                  svg.append("g")
                     ...