Cannot update a pie chart in d3 using on click button

Question

So, I am trying to understand how to replace a pie chart with a different set of data with a button click.

I am facing the issue that it just creates a new one when I click on the button instead of replacing the piechart.

so my js file code is this:-

function pie1(dataset) {
  d3.csv("data1.csv").then(function (data) {
    dataset = data;

    var width = 450;
    var height = 450;
    var margin = 50;

    var radius = Math.min(width, height) / 2 - margin;
      var arc = d3
        .arc()
        .innerRadius(radius * 0.5)
        .outerRadius(radius * 0.8);

      //generate categorical color(10 diff colors)
      var colour = d3.scaleSequential().domain([1,10])
      .interpolator(d3.interpolateViridis);

    var pie = d3
      .pie()
      .sort(null)
      .value(function (d) {
        return d.amount2015;
      });


  var svg = d3
          .select("#piechart")
          .append("svg")
          .attr("width", width)
          .attr("height", height)
          .append("g")
          .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");



  //Set up groups
  var arcs = svg
    .selectAll("g.arc")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "arc");

  var outerArc = d3
    .arc()
    .innerRadius(radius * 0.9)
    .outerRadius(radius * 0.9);

  //Draw arc paths
  arcs
    .append("path")
    .attr("fill", function (d, i) {
      return colour(i+3);
    })
    .attr("stroke", "black")
    .attr("stroke-width", 1.5)
    .attr("d", function (d, i) {
      return arc(d, i);
    });
  //-----------------------TEXT LABELS--------------------------------//
  // data written on graph
  svg
    .selectAll("allLabels")
    .data(pie(dataset))
    .enter()
    .append("text")
    .text(function (d) {
      return d.data.amount2015;
    })
    .attr("transform", function (d) {
      var pos = outerArc.centroid(d);
      var midangle = d.startAngle + (d.endAngle - d.startAngle);
      pos[0] = radius * 0.99 * (midangle < Math.PI ? 1 : -1);
      return "translate(" + pos + ")";
    })
    .style("text-anchor", function (d) {
      var midangle = d.startAngle + (d.endAngle - d.startAngle);
      return midangle < Math.PI ? "start" : "end";
    });

  //-----------------------SLICE TO TEXT POLYLINES--------------------------------//
  svg
    .selectAll("allPolylines")
    .data(pie(dataset))
    .enter()
    .append("polyline")
    .attr("stroke", "black")
    .style("fill", "none")
    .attr("stroke-width", 1)
    .attr("points", function (d) {
      var posA = arc.centroid(d); // line insertion in the slice
      var posB = outerArc.centroid(d); // line break: we use the other arc generator that has been built only for that
      var posC = outerArc.centroid(d); // Label position = almost the same as posB
      var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2; // we need the angle to see if the X position will be at the extreme right or extreme left
      posC[0] = radius * 0.95 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left
      return [posA, posB, posC];
    });
});
}




function pie2(dataset) {
  d3.csv("data2.csv").then(function (data) {
    dataset = data;

    var width = 450;
    var height = 450;
    var margin = 50;

    var radius = Math.min(width, height) / 2 - margin;
      var arc = d3
        .arc()
        .innerRadius(radius * 0.5)
        .outerRadius(radius * 0.8);

      //generate categorical color(10 diff colors)
      var colour = d3.scaleSequential().domain([1,10])
      .interpolator(d3.interpolateViridis);

    var pie = d3
      .pie()
      .sort(null)
      .value(function (d) {
        return d.amount2014;
      });


  var svg = d3
          .select("#piechart")
          .append("svg")
          .attr("width", width)
          .attr("height", height)
          .append("g")
          .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");



  //Set up groups
  var arcs = svg
    .selectAll("g.arc")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "arc");

  var outerArc = d3
    .arc()
    .innerRadius(radius * 0.9)
    .outerRadius(radius * 0.9);

  //Draw arc paths
  arcs
    .append("path")
    .attr("fill", function (d, i) {
      return colour(i+3);
    })
    .attr("stroke", "black")
    .attr("stroke-width", 1.5)
    .attr("d", function (d, i) {
      return arc(d, i);
    });
  //-----------------------TEXT LABELS--------------------------------//
  // data written on graph
  svg
    .selectAll("allLabels")
    .data(pie(dataset))
    .enter()
    .append("text")
    .text(function (d) {
      return d.data.amount2014;
    })
    .attr("transform", function (d) {
      var pos = outerArc.centroid(d);
      var midangle = d.startAngle + (d.endAngle - d.startAngle);
      pos[0] = radius * 0.99 * (midangle < Math.PI ? 1 : -1);
      return "translate(" + pos + ")";
    })
    .style("text-anchor", function (d) {
      var midangle = d.startAngle + (d.endAngle - d.startAngle);
      return midangle < Math.PI ? "start" : "end";
    });

  //-----------------------SLICE TO TEXT POLYLINES--------------------------------//
  svg
    .selectAll("allPolylines")
    .data(pie(dataset))
    .enter()
    .append("polyline")
    .attr("stroke", "black")
    .style("fill", "none")
    .attr("stroke-width", 1)
    .attr("points", function (d) {
      var posA = arc.centroid(d); // line insertion in the slice
      var posB = outerArc.centroid(d); // line break: we use the other arc generator that has been built only for that
      var posC = outerArc.centroid(d); // Label position = almost the same as posB
      var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2; // we need the angle to see if the X position will be at the extreme right or extreme left
      posC[0] = radius * 0.95 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left
      return [posA, posB, posC];
    });
});
}

window.addEventListener("load", pie1);

• I have tried separating standard variables
• adding and removing SVG