JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<h4>Click on the divs below to update the dataset</h4>
<div id="all">all users</div>
<div id="within90">all users that have logged in within 90 days</div>
<div id="within30">all users that have logged in within 30 days</div>
<div id="within7">all users that have logged in within 7 days</div>
<div id="chart" class="adoption-chart"></div>

CSS

.node {
    cursor: pointer;
    fill:#2b706b;
    stroke: #2b706b;
    stroke-width: 2px;
}

.node:hover{
    stroke: black;
}

.node--root {
    fill:#f1f1f1;
    stroke: #f1f1f1;
}

.node--root-hide {
    opacity:0;
    transition:linear 0.5s,opacity 0.5s linear;
}

.node--root-show {
  opacity:1;
  transition:linear 0.5s,opacity 0.5s linear;
}

.node--leaf {
    fill: #89e5de;
    stroke-width: 0;
    z-index:1;
}

.label {
    font: 1em 'apexRoundedMedium';
    text-anchor: middle;
    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}

JavaScript

var allData;
var root;
var pack = null;
var nodes;
var circle = null;
var node = null;
var raw;
var text = null;
var filterOption;
var view;
var k;
var focus;
var firmTotal = null,
    userTotal = null,
    firmTotalActive = null,
    userTotalActive = null;

var svg;

d3.select("#all").on("click", function () { visualizeIt("0"); });
d3.select("#within90").on("click", function () { visualizeIt("2"); });
d3.select("#within30").on("click", function () { visualizeIt("3"); });
d3.select("#within7").on("click", function () { visualizeIt("4"); });

function chart(config) {

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

        pack = d3.layout.pack()
            .padding(5)
            .size([config.diameter - config.margin, config.diameter - config.margin])
            .value(function (d) { return d.size; });

    var edges = null,
        rScale = null;
  
    var color = d3.scale.linear()
        .domain([-1, 5])
        .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
        .interpolate(d3.interpolateHcl);

    //d3.select(self.frameElement).style("height", config.diameter + "px");
    
    visualizeIt("0");

}



function zoomTo(v) {
    k = config.diameter / v[2];
    view = v;

    circle
        .attr("transform", function (d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; })
        .attr("r", function (d) { return d.r * k; });

    text
        .attr("transform", function (d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });

}

function endall(transition, callback) {
    var n = 0;
    transition
        .each(function () { ++n; })
        .each("end", function () { if (!--n) callback.apply(this, arguments); });
}

function zoom(d) {

    //change counts on zoom in/out
    if (d.parent === root &&...