D3 - Rendering Multiple Years' Worth of State Data on US Map
<p>I am new to programming and I have been working the examples in the O'Reilly <em>Interactive Data Visualization</em> book.</p>

<p>Right now, I am working on visualizing 5 years' worth of data on electric vehicles by state.  Each state's color changes depending on the number of registered electric vehicles during that particular year.</p>

<p><strong>Question</strong>:  </p>

<p>Each time I click on a <code>year</code> in the dropdown menu, it creates another map svg underneath it.  How can I get it re-render the data on the same (existing) map svg?</p>

<p><strong>Background:</strong></p>

<p>I have global variables that define the dimensions of the svg.  I also have two functions:</p>

<ul>
<li><code>drawMap</code> has a year argument and builds the svg, loads data from the csv to the <code>us_map.json</code>, and creates all the state boundaries.</li>
<li><code>clickEventMap</code> attaches event listeners to each of the year buttons and then calls the <code>drawMap</code> function passing through the year that matches the year on the button. Lastly, I call <code>drawMap(2013)</code> so the page defaults to 2013 data and then call <code>clickEventMap()</code>.</li>
</ul>

<p><strong>What I have tried so far:</strong>  </p>

<p>I <code>console.log(year)</code> after the d3 <code>color.domain</code> method and the correct year is stored as the year variable at that point. </p>

<p>Also, if I manually change the argument when <code>drawMap()</code> is called, I can successfully change the data rendered on the existing map.</p>

<p><strong>My code:</strong></p>

<pre><code>var w = 1200;
var h = 800;
var barpadding = 1;

var drawMap = function(year) {

  var svg = d3.select("body")
  .append("svg")
  .attr("height", h)
  .attr("width", w);

  var projection = d3.geo.albersUsa()
                         .translate([w/2, h/2]) 
                         .scale([1600]);   

  var path = d3.geo.path()
                   .projection(projection);

  var color = d3.scale.quantize()   
                    .range(["rgb(237, 248, 233)", "rgb(186, 228, 179)", "rgb(116,196,118)", "rgb(49, 163, 84)", "rgb(0, 109, 44)"]);


  color.domain([
    d3.min(data, function(d) {return d["electric_vehicles_" + year];}),
    d3.max(data, function(d) { return d["electric_vehicles_" + year];})

  ]);

  console.log(year);

  d3.json("us-states.json", function(json) {  
    for (var i = 0; i &lt; data.length; i ++) {  
      var dataState = data[i].state;         
      var dataValue = parseFloat(data[i]["electric_vehicles_" + year]);  
      for (var j = 0; j &lt; json.features.length; j++) {   
        var jsonState = json.features[j].properties.name;
        if (dataState === jsonState) {                    
          json.features[j].properties.value = dataValue;
          break;
        }
      }
    }

    var stateView = function() {
    console.log("State clicked.");
    location.href="/states/1";  

    svg.selectAll("path")
      .data(json.features)
      .enter()
      .append("path")
      .attr("d", path)
      .style("fill", function(d) {
        var value = d.properties.value;
        if (value) {
          return color(value);
        }
        else {
          return "#ccc";
        }
      })
      .on("mouseover", function(d, i) {
        d3.select(this)
        .style("fill-opacity", 0.5);
      })
      .on("mouseout", function(d, i) {
        d3.selectAll("path")
        .style("fill-opacity", 1);
      })
      .on("click", function() {
        stateView();
      });
  });
});
};

var clickEventMap = function() {
  $("#map2013").on("click", function() {
    // var year = 2013;
    drawMap(2013);
  });

  $("#map2012").on("click", function() {
    // var year = 2012;
    drawMap(2012);
  });

  $("#map2011").on("click", function() {
    // var year = 2011;
    drawMap(2011);
  });

  $("#map2010").on("click", function() {
    // var year = 2010;
    drawMap(2010);
  });

  $("#map2009").on("click", function() {
    // var year = 2009;
    drawMap(2009);
  });
};

drawMap(2013);
clickEventMap();
</code></pre>

<p>Thanks for your input.</p>