title: data is undefined in D3
body: <p>I'm trying to make a bar chart but when I try to animate it accordingly to the data I provided I get the following error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'grootte' of undefined
  </code></pre>
  
  <p>I am trying to load in an csv file but whatever I try I either get the error that I can't reference the data or I have the problem that it doesn't recognize the data as integers.</p>
  
  <p>This is the relevant code:</p>
  
  <p>var dataset = []</p>
  
  <pre><code>    d3.csv("/csv/test.csv", function(data) {
              dataset = data.map(function(d,i) {
  
                return {
                  grootte: +d.grootte,
                  verhuizingentilburg: d.verhuizingentilburg
                };
              });
          });
  
          //Here we set up the bars with a height of 0, we'll animate them later. The timeout is set for loading data
  
      bars = svg.selectAll("rect")
                  .data(dataset)
                  .enter()
                  .append("rect")
                  .attr("x", function(d, i){
                      return i * (width / dataset.length);
                      console.log(d[0].grootte);
                  })
                  .attr("y", function(d) {
                      return height - marginBottom;
                  })
                  .attr("width", width / dataset.length - padding)
                  .attr("height", 0)
                  .attr("fill", "rgb(128, 89, 183)");
  
   var timer = setInterval(myTimer, 1000);
  
      function myTimer() {
  
          //If the 'amount' radio button is checked, animate it like this
  
           if(document.getElementById('amount').checked){
              bars.data(dataset);
              bars.transition()
                  .duration(1000)
                  .delay(function(d, i){
                      return i * 100;
                  })
                  .attr("height", function(d, i) {
                    console.log(dataset[i].grootte);
                      return yscale(dataset[i].grootte);
                  })
                  .attr("y", function(d, i) {
                      return (height - marginBottom) - yscale(dataset[i].grootte);
                  })
                  .attr("fill", "rgb(193, 38, 38)");
              } 
  }
  </code></pre>
  
  <p>The problem occurs on the following code:</p>
  
  <pre><code>.attr("height", function(d, i) {
                console.log(dataset[i].grootte);
                  return yscale(dataset[i].grootte);
  </code></pre>
  
  <p>Can someone help me? That would really help me out!</p>