title: Using d3.js to create multi-line chart from csv file
body: <p>I'm try to create a multi-line chart with my csv file.
  The content of csv file look like this:</p>
  
  <p><code>date,A,B
  100,1,0
  101,2,0
  102,3,0
  103,4,0
  104,5,0
  105,6,1
  106,7,2
  107,8,3
  108,9,4
  109,10,5
  110,11,6</code></p>
  
  <p>And first I'm trying to create them separately</p>
  
  <pre><code>//This is for the line A    
      var lineGen = d3.svg.line()  
                      .x(function(d) {
                        return xScale(d.date);
                      })
                      .y(function(d) {
                        return yScale(d.A);
                      })
                      .interpolate("basis");
  //This is for the line B
      var lineGen2 = d3.svg.line()
                       .x(function(d) {
                         return xScale(d.date);
                       })
                       .y(function(d) {
                         return yScale(d.B);
                       })
                       .interpolate("basis");
  
  var data = d3.csv("new_test2.csv", function(data) {
               vis.append('svg:path') 
                 .attr('d', lineGen(data))  //This is for the line A
                 .attr('stroke', 'green')
                 .attr('stroke-width', 2)
                 .attr('fill', 'none');
  
               vis.append('svg:path')
                  .attr('d', lineGen2(data))  //This is for the line B
                  .attr('stroke', 'blue')
                  .attr('stroke-width', 2)
                  .attr('fill', 'none');
               });
  </code></pre>
  
  <p>It work well!
  But obviously most of the codes is <strong>too redundant</strong> cause they're just doing the same thing with different column. 
  I wonder whether there is a way to access each column one by one and plot a different line of it?</p>
  
  <p>For now I'm trying to use the JavaScript function to handle the argument:</p>
  
  <pre><code>function draw_line(c, data){
                      console.log(c);  
                      var lineGen = d3.svg.line()
                          .x(function(d) {
                              return xScale(d.date);
                          })
                          .y(function(d) {
                              console.log(d[c]);
                              return yScale(d[c]);
                          })
                          .interpolate("basis");
                      lineGen(data); 
                  };
  var data = d3.csv("new_test2.csv", function(data) {
                      vis.append('svg:path')
                      .attr('d', draw_line('A', data))
                      .attr('stroke', 'green')
                      .attr('stroke-width', 2)
                      .attr('fill', 'none');
  
                      vis.append('svg:path')
                      .attr('d', draw_line('B', data))
                      .attr('stroke', 'blue')
                      .attr('stroke-width', 2)
                      .attr('fill', 'none');
                  });
  </code></pre>
  
  <p>But it won't print out any line, but when checking the returned value with <code>console.log</code>, everything seems totally fine.
  what's going wrong here? Please help :'(</p>
  
  <p>Thanks for every answer provided!</p>
  
  <p><em>(For the <code>vis.append part</code> I probably are going to use for-loop to go through all the column, but I'm not sure how to handle the color -- to make each line show in different color-- so I haven't work on this part yet)</em> </p>