JSFiddle - React, Tailwind, and code Playground

by Vivid D

JavaScript

var diameter = 500,
    format = d3.format(",d");

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 slider = d3.slider().axis(true).min(1).max(20).step(1)value(6);
// svg element for the busliderttons
var sliderDiv = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", 50);
*/
// array for the buttons, to be created with d3
var buttonData = ["Original", "Constant", "Random"];
var updateMethod = 2;

// svg element for the buttons
var buttonDiv = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", 50);
 
// buttons, will update datasets .on('click')
var buttons = buttonDiv.selectAll(".updateButton")
	.data(buttonData)
   .enter()
	.append('g')
	.attr("class", "updateButton")
	.on("click", function(d, i) {
		updateMethod = i;
		updateVis();		
	});

buttons.append("rect")
	.attr("x", function(d, i) { return (i * 100) + 105; })
    .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) + 100; }) 
    .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.size)); });

var circles = vis.append("circle")
    .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; })
  ...