lines

<!DOCTYPE html>
<meta charset="utf-8">

/* Style the lines by removing the fill and applying a stroke */
.line {
    fill: none;
    stroke: #ffab00;
    stroke-width: 3;
}

/* Style the dots by assigning a fill and stroke */
.dot {
    fill: #ffab00;
    stroke: #fff;
}

</style>

<body>
</body>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
<script>

//-------------------------------------------------------------------------------
// Set scales, axes, and colors

var margin = {top: 50, right: 50, bottom: 50, left: 50};

// induction graph specifics
var induction_width = 600 - margin.left - margin.right,
    induction_height = 500 - margin.top - margin.bottom,
    induction_x = d3.scaleLinear()
										.range([0, induction_width - 100]),
		induction_y = d3.scaleLinear()
										.range([induction_height, 0]);
    
var induction_color = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select("body").append("svg")
    .attr("width", induction_width + margin.left + margin.right)
    .attr("height", induction_height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//-------------------------------------------------------------------------------
// Line Graph

function induction_graph(data) {

// EXTERNAL STATE!! ASSUMES x and y HAVE BEEN SET ALREADY!
  induction_x.domain(d3.extent(data, d => d.Condition)).nice();
  induction_y.domain(d3.extent(data, d => d.Norm)).nice();
  var line = d3.line()
               .x(d => induction_x(d.Condition))
               .y(d => induction_y(d.Norm));

// group_by Class and loop through to plot
  var groupby = d3.nest()
      .key(d => d.Class)
      .entries(data);

groupby.forEach(function(d,i) {
            svg.append("path")
            .attr("class", "line")
            .style("stroke", function() { // Add the colours dynamically
                return d.color = induction_color(d.key); })
            .attr("id", "tag"+d.key.replace(/\s+/g, "")) // assign an ID
            .attr("d", line(d.values));
  });

// generate the plots
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + induction_height + ")")
      .call(d3.axisBottom(induction_x))
    .append("text")
      .attr("class", "label")
      .attr("x", induction_width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sepal Width (cm)");

svg.append("g")
      .attr("class", "y axis")
      .call(d3.axisLeft(induction_y))
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Sepal Length (cm)");

svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
        .attr("cx", d => induction_x(d.Condition))
        .attr("cy", d => induction_y(d.Norm))
        .style("fill", d => induction_color(d.Class));
  
  	svg.append("g")
  	.attr("class", "legendCat")
  	.attr("transform", "translate(410,0)");

var legendCat = d3.legendColor()
  	.shapeWidth(26)
   	.cells(12)
  	.orient('vertical')
  	.scale(induction_color);

svg.select(".legendCat")
  		.call(legendCat);

};

//-------------------------------------------------------------------------------
// Wrapper to handle Induction Data
  function induction_wrapper(data) {
    
    data.forEach(d => {
    d.Condition = +d.Condition
    d.Pos = +d.Pos
    d.Norm = +d.Norm
    })
    
    var filter = data.filter(d => d.Pos == 152);
  	console.log(filter);

induction_graph(filter);
}

//-------------------------------------------------------------------------------
// Data loading is async so either include all of the plot in the funciton or roll your own

d3.csv("class.csv", function(error, data) {
  if (error) throw error;
  console.log(data);
  induction_wrapper(data);
});

</script>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js