title: how to update data form file json using d3.js (zoomable circle pack)
body: <p>I'm working on a real-time visualization of incoming data stored in a json file. I use D3 for the visualization. This is the chart I use: <a href="http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html" rel="nofollow noreferrer">http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html</a> </p>
  
  <p><img src="https://i.stack.imgur.com/OqgNL.gif" alt="enter image description here"></p>
  
  <p>This is all the code page:</p>
  
  <pre><code>&lt;body onload="visualize()"&gt;
  
  &lt;h2&gt;
      &lt;input type="button" value="Get new data"
          onclick='ajaxSyncRequest("get-current-time")' /&gt; &lt;br /&gt; &lt;br /&gt;
      Message from server :: &lt;span id="message"&gt;&lt;/span&gt;
  &lt;/h2&gt;
  
  &lt;script type="text/javascript"&gt;
  
  function ajaxSyncRequest(reqURL) {
      //Creating a new XMLHttpRequest object
      var xmlhttp;
      if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari
      } else {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6, IE5
      }
      //Create a asynchronous GET request
      xmlhttp.open("GET", reqURL, false);
      xmlhttp.send(null);
  
      //Execution blocked till server send the response
      if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
              document.getElementById("message").innerHTML = xmlhttp.responseText;
              //alert(xmlhttp.responseText);
              update();
  
          } else {
              alert('Something is wrong !!');
          }
      }
  }
  &lt;/script&gt;
  
  
  
  &lt;script type="text/javascript" src="d3/d3.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="d3/d3.layout.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      function visualize() {
  
          var w = 1280, h = 800, r = 720, x = d3.scale.linear().range(
                  [ 0, r ]), y = d3.scale.linear().range([ 0, r ]), node, root;
  
          var pack = d3.layout.pack().size([ r, r ]).value(function(d) {
              return d.size;
          })
  
          var vis = d3.select("body").insert("svg:svg", "h2")
                  .attr("width", w).attr("height", h).append("svg:g").attr(
                          "transform",
                          "translate(" + (w - r) / 2 + "," + (h - r) / 2
                                  + ")");
  
          d3.json("flare.json", function(data) {
              node = root = data;
  
              var nodes = pack.nodes(root);
  
              vis.selectAll("circle").data(nodes).enter()
                      .append("svg:circle").attr("class", function(d) {
                          return d.children ? "parent" : "child";
                      }).attr("cx", function(d) {
                          return d.x;
                      }).attr("cy", function(d) {
                          return d.y;
                      }).attr("r", function(d) {
                          return d.r;
                      }).on("click", function(d) {
                          return zoom(node == d ? root : d);
                      });
  
              vis.selectAll("text").data(nodes).enter().append("svg:text")
                      .attr("class", function(d) {
                          return d.children ? "parent" : "child";
                      }).attr("x", function(d) {
                          return d.x;
                      }).attr("y", function(d) {
                          return d.y;
                      }).attr("dy", ".35em").attr("text-anchor", "middle")
                      .style("opacity", function(d) {
                          return d.r &gt; 20 ? 1 : 0;
                      }).text(function(d) {
                          return d.name;
                      });
  
              d3.select(window).on("click", function() {
                  zoom(root);
              });
          });
  
          function zoom(d, i) {
              var k = r / d.r / 2;
              x.domain([ d.x - d.r, d.x + d.r ]);
              y.domain([ d.y - d.r, d.y + d.r ]);
  
              var t = vis.transition().duration(d3.event.altKey ? 7500 : 750);
  
              t.selectAll("circle").attr("cx", function(d) {
                  return x(d.x);
              }).attr("cy", function(d) {
                  return y(d.y);
              }).attr("r", function(d) {
                  return k * d.r;
              });
  
              t.selectAll("text").attr("x", function(d) {
                  return x(d.x);
              }).attr("y", function(d) {
                  return y(d.y);
              }).style("opacity", function(d) {
                  return k * d.r &gt; 20 ? 1 : 0;
              });
  
              node = d;
              d3.event.stopPropagation();
          }
      }
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      function update() {
  
          var w = 1280, h = 800, r = 720, x = d3.scale.linear().range(
                  [ 0, r ]), y = d3.scale.linear().range([ 0, r ]), node, root;
  
          var pack = d3.layout.pack().size([ r, r ]).value(function(d) {
              return d.size;
          })
  
          var vis = d3.select("svg").attr("width", w).attr("height", h)
                  .append("svg:g").attr(
                          "transform",
                          "translate(" + (w - r) / 2 + "," + (h - r) / 2
                                  + ")");
  
          d3.json("flare.json", function(data) {
  
              node = root = data;
  
              var nodes = pack.nodes(root);
              // DATA JOIN
              // Join new data with old elements, if any.
              var newG = vis.selectAll("circle").data(nodes);
  
              // UPDATE
              // Update old elements as needed.
              newG.attr("class", "update").transition();
  
              // ENTER
              // Create new elements as needed.
              newG.enter().append("svg:circle").attr("class", function(d) {
                  return d.children ? "parent" : "child";
              }).attr("cx", function(d) {
                  return d.x;
              }).attr("cy", function(d) {
                  return d.y;
              }).attr("r", function(d) {
                  return d.r;
              }).on("click", function(d) {
                  return zoom(node == d ? root : d);
              });
  
              newG.enter().append("svg:text")
              .attr("class", function(d) {
                  return d.children ? "parent" : "child";
              }).attr("x", function(d) {
                  return d.x;
              }).attr("y", function(d) {
                  return d.y;
              }).attr("dy", ".35em").attr("text-anchor", "middle")
              .style("opacity", function(d) {
                  return d.r &gt; 20 ? 1 : 0;
              }).text(function(d) {
                  return d.name;
              });
  
              // EXIT
              // Remove old elements as needed.
              newG.exit().attr("class", "exit").transition().remove();
  
              d3.select(window).on("click", function() {
                  zoom(root);
              });
          });
  
          function zoom(d, i) {
              var k = r / d.r / 2;
              x.domain([ d.x - d.r, d.x + d.r ]);
              y.domain([ d.y - d.r, d.y + d.r ]);
  
              var t = vis.transition().duration(d3.event.altKey ? 7500 : 750);
  
              t.selectAll("circle").attr("cx", function(d) {
                  return x(d.x);
              }).attr("cy", function(d) {
                  return y(d.y);
              }).attr("r", function(d) {
                  return k * d.r;
              });
  
              t.selectAll("text").attr("x", function(d) {
                  return x(d.x);
              }).attr("y", function(d) {
                  return y(d.y);
              }).style("opacity", function(d) {
                  return k * d.r &gt; 20 ? 1 : 0;
              });
  
              node = d;
              d3.event.stopPropagation();
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>I wanted to dynamically update the chart from the new file that I get from the server. But with this function it draw a new chart on the old. I have tried different solution to update the chart but none of them worked.
  How I have to modify the code to get the dynamically update?</p>