BubbleCust

.node:hover {
    stroke: #000;
    stroke-width: 1.5px;
  }

.node--leaf {
    fill: white;
  }

.label {
    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-anchor: middle;
    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
  }

.slider-wrapper {
    display: inline-block;
    width: 1000px;
    padding: 0;
  }

.slider-wrapper input {
    width: 500px;
    height: 20px;
    margin: 0;
  }

#tooltip {
    position: absolute;
    width: 150;
    height: auto;
    padding: 10px;
    background-color: white;
    opacity: 1.0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
  }

#tooltip.hidden {
    display: none;
  }

.title {
    margin: 0;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
  }

.value {
    margin: 0;
    font-family: sans-serif;
    font-size: 12px;
    line-height: 20px;
  }

#dropdown {
    margin-bottom: 20px;
    margin-right: 35px;
  }
</style>
<div class="slider-wrapper">
  <input type="range" min="0" id="slider1">
  <label id="rangeText" />
</div>

<select id="dropdown"></select>
<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.4/d3-queue.min.js"></script>
<script>
  // Feel free to change or delete any of the code you see in this editor!
  var datetimearr = [];
  var datearr = [];

var flarepatharr = [];
  //   var data = [];  
  var data = {};

// Load data and let's do it.
  d3.csv("datetime.csv", function(error, datetime) {
    // Date slider stuff
    var dates = [];
    datetime.map(function(d) {
      if (d.Time != '') datetimearr.push(d.Time);
      dates.push(d.Time.split(' ')[0]);
    });
    dates = dates.filter((v, i, a) => a.indexOf(v) === i); //Unique dates
    dates.map(function(x) {
      datearr.push({
        key: "date",
        value: x
      });
    });

d3.select("#dropdown")
      .selectAll("option")
      .data(datearr)
      .enter()
      .append("option")
      .attr("value", function(option) {
        return option.value;
      })
      .text(function(option) {
        return option.value;
      });

// Dynamic data file name reading stuff
    for (var i = 0; i < datetime.length; i++) {
      flarepatharr.push("flare " + datetime[i].Time.replace(/\:/g, '') + ".json")
    }

var q = d3.queue();

for (var i = 0; i < 2; i++) {
      q.defer(d3.json, flarepatharr[i]);
    }

q.awaitAll(function(error, results) {
      if (error) throw error;
      for (var i = 0; i < results.length; i++) {
        data[datetime[i].Time] = results[i];
      }
      draw(data[datetimearr[0]]);
    });
  });

$(function() {
    $('#slider1').attr('max', datetimearr.length - 1);
    $('#slider1').attr('value', datetimearr.length - 1);
    // on page load, set the text of the label based the value of the range
    $('#rangeText').text(datetimearr[$('#slider1').val()]);
    // setup an event handler to set the text when the range value is dragged (see event for input) or changed (see event for change)
    $('#slider1').on('input change', function() {
      $('#rangeText').text(datetimearr[$(this).val()]);
    });
  });

var svg = d3.select("svg"),
    margin = 20,
    diameter = +svg.attr("width"),
    g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

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

var pack = d3.pack()
    .size([diameter - margin, diameter - margin])
    .padding(2);

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .attr("id", "tooltip");

var tooltiptitle = d3.select("#tooltip")
    .append("p")
    .attr("class", "title");

var tooltipvalue = d3.select("#tooltip")
    .append("p")
    .attr("class", "value");

var rangetext = d3.select('#rangeText');

var slider = d3.select('#slider1');
  slider
    .on('input change', function() {
      draw(data[datetimearr[this.value]]);
    })

// do the svg append stuff outside with empty stuff

// to reference https://jsfiddle.net/VividD/WDCpq/8/
  function draw(root) {
    root = d3.hierarchy(root)
      .sum(function(d) {
        return d.size;
      })
      .sort(function(a, b) {
        return b.value - a.value;
      });

root.each(d => d.value = +d.data.size).sort(function(a, b) {
      return b.value - a.value;
    });

var focus = root,
      nodes = pack(root).descendants(),
      view;

var circle = g.selectAll("circle")
      .data(nodes, function(d) {
        return d.data.name; //<-- add a key function to uniquely identify a node
      });

circle
      .transition()
      .duration(1000)
//                 .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
      .attr("r", function(d) {
        return d.r;
      });
    
    circle.exit().transition()
      .duration(1000)
      .attr("r", function(d) {
        return 0;
      })
      .remove(); //<-- those nodes leaving

circle = circle.enter().append("circle")
      .attr("class", function(d) {
        return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root";
      })
      .style("fill", function(d) {
        return d.children ? color(d.depth) : null;
      })
      .on("click", function(d) {
        if (focus !== d) zoom(d), d3.event.stopPropagation();
      })
      .on("mouseover", function(d) {
        tooltip
          .style("visibility", "visible");
        tooltiptitle
          .text(concatname(d));
        tooltipvalue
          .text("Customer Count: " + d.data.CustCount);
      })
      .on("mousemove", function() {
        return tooltip
          .style("top", (event.pageY - 10) + "px")
          .style("left", (event.pageX + 10) + "px");
      })
      .on("mouseout", function() {
        return tooltip.style("visibility", "hidden");
      })
//       .merge(circle)
      .transition()
      .duration(1000); //<-- those entering and updating

function concatname(d) {
      return d.parent ? d.parent.data.name == 'flare' ? d.data.name : concatname(d.parent) + ':' + d.data.name : d.data.name;
    }

var node = g.selectAll("circle,text,text2");

svg
      .style("background", color(-1))
      .on("click", function() {
        zoom(root);
      });

zoomTo([root.x, root.y, root.r * 2 + margin]);

function zoom(d) {
      var focus0 = focus;
      focus = d;

var transition = d3.transition()
        .duration(d3.event.altKey ? 7500 : 750)
        .tween("zoom", function(d) {
          var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
          return function(t) {
            zoomTo(i(t));
          };
        });

transition.selectAll("text")
        .filter(function(d) {
          return d.parent === focus || this.style.display === "inline";
        })
        .style("fill-opacity", function(d) {
          return d.parent === focus ? 1 : 0;
        })
        .on("start", function(d) {
          if (d.parent === focus) this.style.display = "inline";
        })
        .on("end", function(d) {
          if (d.parent !== focus) this.style.display = "none";
        });
    }

function sumChildren(node) {
      node.size = node.children.reduce(function(r, v) {
        return r + (v.children ? sumChildren(v) : v.data.size);
      }, 0);
      //return node.size;
      return 0;
    }
  }
</script>

https://d3js.org/d3.v4.min.js

https://code.jquery.com/jquery-3.3.1.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.4/d3-queue.min.js