title: D3: How to dynamically refresh a graph by changing the data file source?
body: <p>How do I update the data on demand by changing the file d3 accesses? With a click, for example, it would read data from a new data file and add more nodes to the graph like AJAX. </p>
  
  <p>I use d3.tsv to read in data.tsv, one of many files of the same format. </p>
  
  <p>I made a simple graph to illustrate my question. Thanks in advance.</p>
  
  <pre><code>&lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var width = 400,
          height = 200;
  
      var x = d3.scale.linear().range([0, width]),
          y = d3.scale.linear().range([height, 0]);
  
      var svg = d3.select("body")
        .append("svg")
          .attr("width", width)
          .attr("height", height);
  
      d3.tsv("data.tsv", function(error, data) { 
          if (error) console.warn(error);
          x.domain(d3.extent(data, function(q) {return q.xCoord;}));
          y.domain(d3.extent(data, function(q) {return q.yCoord;}));
  
          svg.selectAll(".dot")
              .data(data)
              .enter().append("circle")
                  .attr("r", 10)
                  .attr("cx", function(d) { return x(d.xCoord); })
                  .attr("cy", function(d) { return y(d.yCoord); })
      }); 
  &lt;/script&gt;
  &lt;a href="#"&gt;update the graph&lt;/a&gt;
  </code></pre>