JSFiddle - React, Tailwind, and code Playground

by cristiscu

JavaScript

var diameter = 300,
    format = d3.format(",d"),
    dataSource = 0;

var pack = d3.layout.pack()
    .size([diameter - 4, diameter - 4])
    .sort( function(a, b) {
        var threshold = 10000000;
        if ((a.value > threshold) && (b.value > threshold)) {
            return -(a.value - b.value);
        } else {
            return -1;
        }
    })
    .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 circles = vis.append("circle")
    .attr("stroke", "black")
    .style("fill", function(d) { return d.children ? "white" :  d.color; })
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", function(d) { return d.r; });

//updateVis();

function updateVis() {

    if (dataSource == 0)
    ...