JSFiddle - React, Tailwind, and code Playground
JavaScript
var diameter = 500,
format = d3.format(",d"),
dataSource = 2;
var pack = d3.layout.pack()
.size([diameter - 4, diameter - 4])
.value(function(d) { return d.size; });
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter);
var buttonData = ["Original", "Constant", "Random"];
var buttonDiv = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", 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", 98)
.attr("height", 25)
.attr("ry", 5)
.style("stroke", "#787878")
.style("fill", "tan");
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("font-size", "15px")
.text(function(d) { return d; });
var data = getData();
var vis = svg.datum(data).selectAll(".node")
.data(pack.nodes)
.enter()
.append("g");
var titles = vis.append("title")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.text(function(d) { return d.name +
(d.children ? "" : ": " + format(d.value)); });
var elipses = vis.append("ellipse")
.attr("stroke", "black")
.style("fill", function(d) { return !d.children ? "tan" : "beige"; })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("rx", function(d) { return d.r; })
.attr("ry", function(d) { return d.r/3; });
updateVis();
function updateVis() {
if (dataSource == 0)
pack.value(function(d) { return d.size; });
if (dataSource == 1)
pack.value(function(d) { return 100; });
if (dataSource == 2)
pack.value(function(d) {...