title: In d3js, how to plot line chart from csv file, taking data from seperate columns for each row
body: <p>I am new to d3js. I have data in csv file. The data in csv file is something like this:</p>
  
  <p>Name,val1,val2,val3,val4<br>
  x,5,4,8,2<br>
  y,10,5,4,13<br>
  z,7,3,2,11</p>
  
  <p>I need to plot line chart for each row depending upon choice selected, i.e a chart for x with values 5,4,8 or for y with corresponding values &amp; so on.</p>
  
  <p>Here is the code I am working on:</p>
  
  <pre><code>var slots=["0-6", "6-12", "12-18", "18-23"];
  
  newdata = rawdata.filter(function(d)
  {
  return (d["Name"] == ch);
  });
  
  maxval = d3.max(rawdata, function(d)
  {
      return Math.max(d["Val1"],d["Val2"],d["Val3"],d["Val4"]);
  });
  
  var rangeX=d3.scale.ordinal().rangeRoundBands([0, w], 0.2).domain(slots);
  var rangeY=d3.scale.linear().range([h, 0]).domain([0, (maxval+50)]);
  var axis_x=d3.svg.axis().scale(rangeX).tickSize(2).ticks(4);
  var axis_y=d3.svg.axis().scale(rangeY).tickSize(2).orient("left");
  
  p.append("g").call(axis_x).attr("transform", "translate(0," + (h) + ")");;
  p.append("g").call(axis_y).attr("transform", "translate(0,0)");
  
  var lineGen = d3.svg.line()
                  .x(slots, function(slots, i){return xScale(slots[i]);})
                  .y(newdata, function (d, i){return yScale(d["Data "+(i+1)]);})
  
  p.selectAll("line").attr("d", lineGen()).attr("stroke", "red").attr("stroke-width", 2).attr("fill", "none");
  </code></pre>
  
  <p>I know the "lineGen" function cannot be used the way I am using, I cant have the "slots" &amp; "newdata" passed like this in "x" &amp; "y". But was giving a try.<br>
  Can somebody guide me what could be done?</p>