title: Color is not defined D3 line chart
body: <p>Trying to draw a line chart with D3.js when I got the error color is not defined. However when I look it up in tutorials it is not defined anywhere. Should the color be defined in an other way? What I do is basically read the data file and set the necessary components for my chart. I am a beginner with D3 and I am not sure if my coding style is correct. </p>
  
  <pre><code>d3.csv("test.csv", function (error, data) {
  
              console.log("inital data", data);
  
              var labelvar = "OutDistance";
              var varNames = d3.keys(data[0]).filter(function (key) { return key !== labelvar });
  
              color.domain(varNames);
  
              var seriesData = varNames.map(function (name) {
                  return {
                      name: name,
                      values: data.map(function (d) {
                          return { name: name, label: d[labelvar], value: +d[name] };
                      })
                  };
              });
  
              console.log("seriesData", seriesData);
  
              x.domain(data.map(function (d) {
                  return d.OutDistance;
              }));
              y.domain([
                  d3.min(seriesData, function (c) {
                      return d3.min(c.values, function (d) { return d.value; });
                  }),
                  d3.max(seriesData, function (c) {
                      return d3.max(c.values, function (d) { return d.value; })
                  })
              ]);
  
              var series = d3.selectALL(".series").data(seriesData)
              .enter().append("g")
              .attr("class" , "series");
  
              series.append("path")
              .attr("class","line")
              .attr("d" , function(d) {return line(d.values);})
              .style("stroke" , function(d){return color(d.name);})
              .style("stroke-width", "4px")
              .style("fill" , "none");
  
              var line = d3.svg.line()
              .interpolate("cardinal")
              .x(function(d){return x(d.label) + x.rangeBand() / 2 ;})
              .y(function(d) {return y(d.value);});
  
          });
  </code></pre>