title: Zoomable Circle Packing changes to JSON on click
body: <p>This entire day I've tried to make this (<a href="https://bl.ocks.org/mbostock/7607535" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/7607535</a>) work for my use case. In the page mentioned earlier the author saves the data as a JSON, but I want to allow the user to make changes to the JSON. </p>
  
  <p>I am building out a tool that allows a user to input a country he or she is interested in into a form. I make an ajax request to get this form's information and then I pass it to Flask so that Flask can query my Cassandra database. Once Flask queries my Cassandra database it sends the information back to my AJAX request. Once I have the information in AJAX I try to update my current dictionary so that another bubble for the country the user picked shows up, but this does not work. I am able to make a correct chart for the first entry, but once a user enters a second entry my chart gets messed up. In order to see what is happening please look at my website here: <a href="http://ec2-52-27-239-181.us-west-2.compute.amazonaws.com/overview" rel="nofollow noreferrer">http://ec2-52-27-239-181.us-west-2.compute.amazonaws.com/overview</a></p>
  
  <p>Here is my current code:</p>
  
  <pre><code>function add_simple(json,dict_country){ //updates the dictionary
  
    function event_children(event_dict){ //returns a list with event children
      var time_lst = []
      var event_names = Object.keys(event_dict)
      for (var i = 0; i&lt;event_names.length; i++){
        var event_type = {}
        event_type["name"] = event_names[i]
        event_type["children"] = []
        event_info = event_dict[event_names[i]]
        for (var key in event_info){
          key_obj = {}
          key_obj["name"] = key + " =&gt; " + event_info[key]
          key_obj["size"] = 2000
          event_type["children"].push(key_obj)
        }
        time_lst.push(event_type)
      }
      return time_lst
    }
  
    var country = dict_country["Country"]
    var timeframe = dict_country["Timeframe"]
    var date = dict_country["Date"]
    var total = dict_country["Total"]
    var info = dict_country["Overview"]
    json["children"].push({"name":country,"children":event_children(info)})
    return json
  }
  
  
  var poot = {"name":"flare","children":[]}
  $( "#target" ).click(function() {
               var data = {};
               data.country = $("#country").val();
               data.timeframe = $("#timeframe").val();
               data.eventdate = $("#eventdate").val();
               $.ajax({
                  type : "POST",
                  url : "/overview",
                  data: JSON.stringify(data, null, '\t'),
                  contentType: 'application/json;charset=UTF-8',
                  success: function(result) {
                     poot = add_simple(poot,result["result"])
             console.log(poot)
             createCircles(poot);
                  }
                });
               })
  
  
  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);
  
  function createCircles(root){
  root = d3.hierarchy(root)
      .sum(function(d) { return d.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)
    .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(); });
  
  var text = g.selectAll("text")
    .data(nodes)
    .enter().append("text")
      .attr("class", "label")
      .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
      .style("display", function(d) { return d.parent === root ? "inline" : "none"; })
      .text(function(d) { return d.data.name; });
  
  var node = g.selectAll("circle,text");
  
  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 zoomTo(v) {
    var k = diameter / v[2]; view = v;
    node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
    circle.attr("r", function(d) { return d.r * k; });
  }
  }
  //});
  </code></pre>
  
  <p>I greatly appreciated any help. </p>