title: Updating map polygons and map legend with selected color option from dropdown menu?
body: <p>I am a rookie programmer trying to make an interactive map with d3.  So far, I have been able to update the colors of the polygons in the SVG choropleth (quantile) map by selecting a Colorbrewer CSS color scheme from a dropdown menu.  </p>
  
  <pre><code>d3.select("select#ColorSelection")
      .on("keyup", function() {d3.selectAll("svg#Mapsvg").attr("class", this.value)})
      .on("change", function() {d3.selectAll("svg#Mapsvg").attr("class", this.value)});    
  </code></pre>
  
  <p>However, the color boxes for the map legend are stuck on the blue color scheme, no matter what other color scheme option is chosen in the dropdown menu.  Here is an <a href="http://i1299.photobucket.com/albums/ag70/geomapper123/MapLegendColorNotUpdating_zps3903674a.png" rel="nofollow">example</a>.  I have tried some things, such as adding additional code that simply copies the code above, but replaces "svg#Mapsvg" with the map legend "svg#Legendsvg", but have not had any luck.      </p>
  
  <p>How can I update the map legend ("svg#Legendsvg") and the map itself with the same color scheme selected from the dropdown menu? </p>
  
  <p>Apologies ahead of time if I am missing something very basic.  Thanks for any help you can offer!  </p>
  
  <p>Here is the code for the map legend color boxes, for reference:</p>
  
  <pre><code>var legends = d3.select('svg#Legendsvg')
  var legendbars = legends.selectAll('rect')
          .data(legend)
          .enter()
          .append('rect')
          .attr('x', 5)
          .attr('y', function(d, i) {return (i*30)+25})
          .attr('height',28)
          .attr('width',30)
          .attr('class', function (d) {return quants(d)} )
          ;
  </code></pre>
  
  <p>And reference code for the dropdown menu:</p>
  
  <pre><code>    &lt;p&gt;Color Scheme: 
          &lt;select id="ColorSelection"&gt;
          &lt;option value="Blues" selected&gt;Blues&lt;/option&gt;
          &lt;option value="Greys"&gt;Greys&lt;/option&gt;
          &lt;option value="Greens"&gt;Greens&lt;/option&gt;
          &lt;option value="Oranges"&gt;Oranges&lt;/option&gt;
          &lt;option value="Reds"&gt;Reds&lt;/option&gt;
          &lt;option value="Purples"&gt;Purples&lt;/option&gt;
          &lt;option value="YlGn"&gt;Yellow-Green&lt;/option&gt;
          &lt;option value="YlGnBu"&gt;Yellow-Green-Blue&lt;/option&gt;
          &lt;option value="GnBu"&gt;Green-Blue&lt;/option&gt;
          &lt;option value="BuGn"&gt;Blue-Green&lt;/option&gt;
          &lt;option value="PuBuGn"&gt;Purple-Blue-Green&lt;/option&gt;
          &lt;option value="PuBu"&gt;Purple-Blue&lt;/option&gt;
          &lt;option value="BuPu"&gt;Blue-Purple&lt;/option&gt;
          &lt;option value="RdPu"&gt;Red-Purple&lt;/option&gt;
          &lt;option value="PuRd"&gt;Purple-Red&lt;/option&gt;
          &lt;option value="OrRd"&gt;Orange-Red&lt;/option&gt;
          &lt;option value="YlOrRd"&gt;Yellow-Orange-Red&lt;/option&gt;
          &lt;option value="YlOrBr"&gt;Yellow-Orange-Brown&lt;/option&gt;
          &lt;/select&gt;&lt;/br&gt;
  </code></pre>