title: d3.js noob : How to pass dynamic variable as data
body: <p>I'm trying to change the data set via a variable passed from the clicked button.</p>
  
  <p>Here's an example of what I'm doing so far: <a href="http://jsfiddle.net/earlybirdtechie/qmC9E/" rel="nofollow">http://jsfiddle.net/earlybirdtechie/qmC9E/</a></p>
  
  <pre><code>d3.selectAll('button.decadeBtn')
      .on("click", function() {
          var currentDecadeName = $(this).attr('data-decade');
          console.log('currentDecadeName: '+ currentDecadeName); 
          svg.selectAll("rect.bars")
          .data(currentDecadeName, function(d) { return d.id })
          .transition()
          .duration(1499)
          .ease("bounce")
          .attr({
              height: function(d,i) {
                  return d.value;
              }
          })
  </code></pre>
  
  <p>In the jsFiddle example above when you click on any of the buttons, the bars should change based on the data for it's decade.  Yet, the code is expecting the name of the data, not a dynamic variable name.  So, if you go to line 43 in the js code and replace the variable name 'currentDecadeName' with 'seventies', then the bars will change to the seventies data once any button is clicked.  How can I get this to work with a dynamic variable instead of a static data variable?</p>
  
  <p>When <a href="https://groups.google.com/forum/?fromgroups=#!topic/d3-js/c3FTQZn3Dz4" rel="nofollow">I posted this question in google groups</a>, I was told to use the map object, yet, I'm a noob and not clear on how d3.map works.  </p>
  
  <p>Can anyone clear up how one can use d3.map in this situation, or point me to a tutorial on how the map object works in d3?</p>
  
  <p>Thanks!</p>