title: Updating each iteration using d3.js
body: <p>I am working on a line graph in <code>d3.js</code> and am unsure how to to iterate through each country and update my graph's points. I want to draw each country on my map. In my code I have only hard coded the first country and the output shown in the following images. Have attached my csv file to show the column names. I am unsure whether I need to alter my csv file to do so. 
  any help is appreciated</p>
  
  <p><img src="https://i.stack.imgur.com/ZOl5L.png" alt="my csv data"></p>
  
  <p><img src="https://i.stack.imgur.com/f7TZI.png" alt="line graph"></p>
  
  <pre><code>function init(){
  
  var w = 600;
  var h = 600;    
  var barPadding = 20;
  
  var dataset;
  
          var rowConverter = function(d){
              return {
                  year: parseFloat(d.year),
                  Afghanistan: (d.Afghanistan),
                  Albania: (d.Albania),
                  Algeria: (d.Algeria),
                  Andorra: (d.Andorra),
                  Angola: (d.Angola)
          };
      }
  
      d3.csv("hello.csv", rowConverter, function(data){
  
              dataset = data;
              if (data==null){
                  alert("Error, data has not been loaded!");
              }
              else{
              draw(dataset);
              console.log(dataset);
              }
      });
  
      function draw(){
  
      var xScale = d3.scaleLinear()
          .domain([d3.min(dataset,function(d){
              return d.year;
          }),
          d3.max(dataset,function(d){
              return d.year;
          })])
          .range([barPadding,w-barPadding]);
  
      var yScale = d3.scaleLinear()
          .domain([0,100])
          .range([h-barPadding,barPadding*2]);            
  
      var xAxis = d3.axisBottom()
                      .scale(xScale)
                      .ticks(5);
  
      var yAxis = d3.axisLeft()
                      .scale(yScale)
                      .ticks(5);
  
      var valueline = d3.line()
                      .x(function(d) { return xScale(d.year); })
                      .y(function(d) { return yScale(d.Afghanistan); });                      
  
      var svg = d3.select("#chart")
          .append("svg")
          .attr("width", w)
          .attr("height", h);
  
      svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
          return xScale(d.year);
      })
      .attr("cy", function(d) {
          return yScale(d.Afghanistan);
      })
      .attr("r", 5)
      .attr("fill","slategrey")
  
      svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .text(function(d) {
          return d.year + "," + d.Afghanistan;
      })
      .attr("x", function(d) {
          return xScale(d.year);
      })
      .attr("y", function(d) {
          return yScale(d.Afghanistan);
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", "10px")
      .attr("fill", "blue");      
  
      svg.append("path")
          .data([dataset])
          .attr("class", "line")
          .attr("d", valueline);
  
      svg.append("g")
          .attr("class","axis")
          .attr("transform", "translate(0," + (h - barPadding) + ")")
          .call(xAxis);
  
      svg.append("g")
          .attr("class","axis")
          .attr("transform", "translate(" + barPadding + ",0)")
          .call(yAxis);       
      }
  
   }
   window.onload=init;
  </code></pre>