JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chart"></div>

CSS

.updateButton {
    cursor: pointer;
}
.parent:hover {
    stroke: #bdbdbd;
    stroke-width: 1px;
}
.child:hover {
    stroke: #bdbdbd;
    stroke-width: 1px;
}
.chartSVG {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.updateButtons {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

JavaScript

var format = d3.format(",f"),
  diameter = 400,
  width = 400,
  height = 400,
  x = d3.scale.linear().range([0, diameter]),
  y = d3.scale.linear().range([0, diameter]),
  duration = 500, // transition animation
  padding = 1.2, // separation between nodes

  outlineColor = "#f6f6f6",
  buttonColor = "#fafafa",
  color = d3.scale.ordinal()
    .range(["#b9ed98", "#e4f7a9", "#b2f2f0"]);

// Create svg chart area
var svg = d3.select("#chart").append("svg")
  .attr("class", "chartSVG")
  .attr("height", "100%")
  .attr("width", "100%")
  .attr("viewBox", "-115 0 800 800");

// The source of the data
var dataSource = 0,
  postData = getData(),
  groupNodes;

// Use the pack layout to initialize node positions.
var pack = d3.layout.pack()
  .sort(null)
  .padding(padding)
  .size([diameter - 4, diameter - 4])
  .value(function (d) { return d.size; }); //set size attribute

// Add buttons to update data source
var buttonData = ["Original", "Change Data", "Constant", "Random"];
var buttonDiv = d3.select("#chart").insert("svg", "svg")
  .attr("class", "updateButtons")
  .attr("width", "100%")
  .attr("height", 50)
  .attr("viewBox", "0 0 800 50");
var buttons = buttonDiv.selectAll(".updateButton")
    .data(buttonData)
  .enter()
  .append('g')
  .attr("class", "updateButton")
  .on("click", function (d, i) {
    dataSource = i;
    updateVis();
  });
buttons.append("rect")
  .attr("x", function (d, i) {
  return (i * 100) + 100;
})
  .attr("width", 100)
  .attr("height", 25)
  .attr("ry", 5)
  .style("stroke", outlineColor)
  .style("fill", buttonColor);
buttons.append("text")
  .attr("x", function (d, i) {
  return (i * 100) + (100 / 2) + 98;
})
  .attr("y", 12)
  .attr("dy", "0.35em")
  .style("text-anchor", "middle")
  .style("fill", "black")
  .style("font", "14px sans-serif")
  .text(function (d) {
  return d;
});


function getNewData() {
  if (dataSource === 0) {
      postData = getData();
  } else {
      postData = getData2();
  }
 ...