title: D3 How to change dataset based on drop down box selection
body: <p>I am trying to update/change the data for rectangles based on drop down box selection. I have tried various things and I don't really understand the D3 dispatch function well enough. Grateful if someone could update this code so that I can see how it works in practice. I have 3 datasets with values, and I am simply trying to update rectangle dimensions based on what the user selects in the menu bar. </p>
  
  <p>many thanks, </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Menu Bar&lt;/title&gt;
      &lt;script type="text/javascript" src="d3/d3.js"&gt;
      &lt;/script&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;             
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;select id = "opts"&gt;
  &lt;option value="ds1"&gt;data1&lt;/option&gt;
  &lt;option value="ds2"&gt;data2&lt;/option&gt; 
  &lt;option value="ds3"&gt;data3&lt;/option&gt;
    &lt;!-- and so on... --&gt;   
    &lt;/select&gt;     
  
  &lt;script type="text/javascript"&gt;
  
  var w = 100,
      h = 100
  ;
  
  var color = d3.scale.ordinal()
              .range(["#1459D9", "#daa520"]);
  
  
  var ds1 = [[{x:0,y:12}],[{x:0,y:45}]];
  var ds2 = [[{x:0,y:72}],[{x:0,y:28}]];
  var ds3 = [[{x:0,y:82}],[{x:0,y:18}]];
  
  
  var canvas = d3.select("body")
      .append("svg")
      .attr("width",100)
      .attr("height",100)        
  ;
  
  var appending = canvas.selectAll("body")
      .data(ds2)   ///trying to make this selection dynamic based on menubar selection                         
      .enter()                    
      .append("g")
      .style("fill", function(d,i){return color(i);})
      ;
  
     appending.selectAll("shape")
      .data(function (d) {return d;})
      .enter()
      .append("rect")
      .attr("x",10)
      .attr("y",10)
      .attr("width",function (d) {return d.y;})
      .attr("height",19)
      ;
  
  
   &lt;/script&gt;      
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>