title: How to change json file in d3.js and update chart using select options
body: <p>I'm learning <code>JavaScript</code> through <code>d3.js</code>.</p>
  
  <p>I'm trying to change json file using select options in order to update a d3 chart.</p>
  
  <p>I did:</p>
  
  <ol>
  <li>I created a <code>d3.js</code> chart.</li>
  <li>I added options to <code>select</code> id.</li>
  <li>I added <code>var v = this.value;</code> from <code>options</code> to <code>d3.json</code></li>
  </ol>
  
  <p>The result I got change the dataset, however it writes <code>x</code> and <code>y axis</code> <em>+</em> <code>bars</code> again and again.</p>
  
  <pre><code>d3.json("jsonFile_1.json", function(err, data) {
      createVis(data);
  });
  
  function createVis(json) {
  
      var n = 3, // number of layers
          m = json.length, // number of samples per layer
          data = d3.layout.stack()([
              json.map(function(d, i) {
                  return {
                      x: i,
                      y: parseInt(d.aspersion),
                      date: d.date
                  };
              }),
              json.map(function(d, i) {
                  return {
                      x: i,
                      y: parseInt(d.manual),
                      date: d.date
                  };
              }),
              json.map(function(d, i) {
                  return {
                      x: i,
                      y: parseInt(d.cultivo),
                      date: d.date
                  };
              })
          ]);
  
      var p = 20,
          w = 660 - 2.5 * p,
          h = 425 - .5 * p,
          mx = m,
          my = d3.max(data, function(d) {
              return d3.max(d, function(d) {
                  return d.y0 + d.y;
              });
          }),
          x = function(d) {
              return d.x * w / mx;
          },
          y0 = function(d) {
              return h - d.y0 * h / my;
          },
          y1 = function(d) {
              return h - (d.y + d.y0) * h / my;
          },
          y2 = function(d) {
              return d.y * h / my;
          },
          format = d3.format(",");
  
      var x_range = d3.scale.linear().domain([0, data[0].length - 1]).range([10, w - 40]);
  
      var vis = d3.select('#chartviz')
          .append('svg')
          .attr("width", w + 2.5 * p)
          .attr("height", h + p);
  
      var layers = vis.selectAll('g.layer')
          .data(data)
          .enter()
          .append('g')
          .style("fill", function(d, i) {
              return color(i);
          })
          .attr("class", "layer");
  
      var bars = layers.selectAll("g.bar")
          .data(function(d) {
              return d;
          })
          .enter()
          .append("g")
          .attr("class", "bar")
          .attr("transform", function(d) {
              return "translate(" + x(d) + ")";
          });
  
      var xAxis = d3.svg.axis().scale(x_range)
          .ticks(17);
  
      var y_range = d3.scale.linear()
          .domain([0, yStackMax])
          .range([h, 0]);
  
      var yAxis = d3.svg.axis().scale(y_range)
          .ticks(7)
          .orient('right');
  
      vis.selectAll('g.bar').append('rect')
          .attr("x", function(d, i) {
              return x({
                  x: .9 * ~~(i / m) / n
              });
          })
          .attr("width", x({
              x: .9 / n
          }))
          .attr("y", h)
          .attr("height", 0)
          .transition()
          .delay(function(d, i) {
              return i * 10;
          })
          .attr("y", function(d) {
              return h - y2(d);
          })
          .attr("height", y2);
  
      vis.append('svg:g')
          .attr('class', 'x axis')
          .attr("transform", "translate(10," + h + ")")
          .call(xAxis);
  
      vis.append('svg:g')
          .attr('class', 'y axis')
          .attr("transform", "translate(" + w + ",0)")
          .call(yAxis);
  
      // Create Legends
      vis.append("rect")
          .attr('class', 'chartviz-legend-1')
          .attr("width", 10)
          .attr("height", 10);
  
      vis.append("text")
          .attr("x", 20)
          .attr("dy", ".9em")
          .text("Legend 1");
  
      vis.append("line")
          .attr("x1", 0)
          .attr("x2", w - x({
              x: .1
          }))
          .attr("y1", h)
          .attr("y2", h);
  </code></pre>
  
  <p>Then I added a transition button, from <em>group chart</em> to <em>stack chart</em>.</p>
  
  <pre><code>window.transitionGroup = function() {
      d3.select("#button-group").style("display", "none");
      d3.select("#button-stack").style("display", null);
  
      var group = d3.selectAll("#chartviz");
  
      group.selectAll("g.layer rect")
          .transition()
          .duration(500)
          .delay(function(d, i) {
              return (i % m) * 10;
          })
          .attr("x", function(d, i) {
              return x({
                  x: .9 * ~~(i / m) / n
              });
          })
          .attr("width", x({
              x: .9 / n
          }))
          .each("end", transitionEnd);
  
      function transitionEnd() {
          d3.select(this)
              .transition()
              .duration(500)
              .attr("y", function(d) {
                  return h - y2(d);
              })
              .attr("height", y2);
      }
  }
  
  window.transitionStack = function() {
      d3.select("#button-stack").style("display", "none");
      d3.select("#button-group").style("display", null);
  
      var stack = d3.select("#chartviz");
  
      stack.selectAll("g.layer rect")
          .transition()
          .duration(500)
          .delay(function(d, i) {
              return (i % m) * 10;
          })
          .attr("y", y1)
          .attr("height", function(d) {
              return y0(d) - y1(d);
          })
          .each("end", transitionEnd);
  
      function transitionEnd() {
          d3.select(this)
              .transition()
              .duration(500)
              .attr("x", 0)
              .attr("width", x({
                  x: .9
              }));
      }
  }
  </code></pre>
  
  <p>After I added options to select tag, this is what I tried to do in order to change json file:</p>
  
  <pre><code>$('#selectOptions').change(function() {
      var v = this.value;
      var jsondata = 'jsondata/' + v + '.json';
      console.log(jsondata);
      if (window.location.hash === '') {
          d3.json(jsondata, function(err, data) {
              createVis(data);
          });
      };
  });
  </code></pre>
  
  <p>It works, it changes json file, however it rewrites <code>x</code> and <code>y axis</code>, <code>legend</code>, and <code>bars</code> everytime a new option is selected.</p>
  
  <p>How can I improve this script. </p>
  
  <p>Any suggestions are appreciated! Thanks!</p>