Making a SelectBox or Combobox javascript
<p>I´m starting now working with javascript and making infovis with d3.js, and I´m stuck in a problem....
I have the following code to make a bar chart, and the dataset is defined on the data.tsv file. The bar chart is supposed to show the registration values of cars and motorcycles (one in each bar) for a given year and country.  In the X-axis it should appear the vehicle types: "Cars" and "Motorcycles" and in the y-axis it should appear the value for the registrations for cars and motorcycles in a given country and year (I want to select the year in the combobox).
In the dataset I have several years available and my goal is to select on the combobox one of them and visualize the bar chart for the cars and motorcycles registrations of that year. For now in my code i´m selecting only one country to see data from.
I already tried some approaches, but neither worked so far...
Now I´m have the following code, which gives me an error of "TypeError: Cannot convert undefined or null to object" on the line where I go get the value for every column <code>var elements = Object.keys(data[0])</code>.
For now I´m selecting also only one country to show data from, the thing I need now is to put the selectbox with the years working only for that specific country for now, which is defined in the line <code>var data = data.filter(function(d){return d.geo == 'Portugal';})</code></p>

<p>The HTML File with js code inside it:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;!DOCTYPE html&gt;
&lt;meta charset="utf-8"&gt;
&lt;head&gt;
&lt;style&gt;

.rectangle {
 fill: steelblue;
}
.rectangle:hover {
 fill: orange;
}
.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="drop" align=center&gt;&lt;/div&gt;
&lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
&lt;script&gt;

var margin = {top: 80, right: 180, bottom: 80, left: 180},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
 .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
 .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", function(error, data){

 // filter country
 var data = data.filter(function(d){return d.geo == 'Portugal';});
 // Get every column value
 var elements = Object.keys(data[0])
  .filter(function(d){
   return ((d != "geo") &amp; (d != "vehicle"));
  });
 var selection = elements[0];

 var y = d3.scale.linear()
   .domain([0, d3.max(data, function(d){
    return +d[selection];
   })])
   .range([height, 0]);

 var x = d3.scale.ordinal()
   .domain(data.map(function(d){ return d.vehicle;}))
   .rangeBands([0, width]);


 var xAxis = d3.svg.axis()
  .scale(x)
     .orient("bottom");

 var yAxis = d3.svg.axis()
  .scale(y)
     .orient("left");

 svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
     .call(xAxis)
     .selectAll("text")
     .style("font-size", "8px")
       .style("text-anchor", "end")
       .attr("dx", "-.8em")
       .attr("dy", "-.55em")
       .attr("transform", "rotate(-90)" );


  svg.append("g")
     .attr("class", "y axis")
     .call(yAxis);

 svg.selectAll("rectangle")
  .data(data)
  .enter()
  .append("rect")
  .attr("class","rectangle")
  .attr("width", width/data.length)
  .attr("height", function(d){
   return height - y(+d[selection]);
  })
  .attr("x", function(d, i){
   return (width / data.length) * i ;
  })
  .attr("y", function(d){
   return y(+d[selection]);
  })
  .append("title")
  .text(function(d){
   return d.vehicle + " : " + d[selection];
  });

 var selector = d3.select("#drop")
     .append("select")
     .attr("id","dropdown")
     .on("change", function(d){
         selection = document.getElementById("dropdown");

         y.domain([0, d3.max(data, function(d){
    return +d[selection.value];})]);

         yAxis.scale(y);

         d3.selectAll(".rectangle")
             .transition()
             .attr("height", function(d){
     return height - y(+d[selection.value]);
    })
    .attr("x", function(d, i){
     return (width / data.length) * i ;
    })
    .attr("y", function(d){
     return y(+d[selection.value]);
    })
             .ease("linear")
             .select("title")
             .text(function(d){
              return d.vehicle + " : " + d[selection.value];
             });
      
            d3.selectAll("g.y.axis")
             .transition()
             .call(yAxis);

         });

    selector.selectAll("option")
      .data(elements)
      .enter().append("option")
      .attr("value", function(d){
        return d;
      })
      .text(function(d){
        return d;
      })


});

&lt;/script&gt;

&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>A sample of the dataset (data.tsv):</p>

<pre><code>geo vehicle 2009 2010
Portugal Cars 100000 140000
Portugal Motorcycles 30000 65000
France Cars 160000 120000
France Motorcycles 70000 90000
</code></pre>

<p>If anyone could help I´ll be thankful.</p>