Scatterplot of iris.csv

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .axis path,
		.axis line {
    fill: none;
    stroke: rgb(251,230,146);
    shape-rendering: crispEdges;
		}
    
    .axis text {
      fill : rgb(251,230,146)
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var dataset;
    
    d3.csv("iris.csv", function(err, data){
      
      if (err){
        console.log("ERREUR !");
      } else {
        console.log("données chargées");
      }
      
      dataset = data;
      width = 700;
      height = 500;
      var svg = d3.select("body")
                  .append("svg")
                  .attr("width", width)
      						.attr("height",height)
      						.style("background", "rgb(0,0,60)")
      						.attr("transform","translate(125,0)");

var circles = svg.selectAll("circle")
      								.data(dataset)
      								.enter()
      								.append("circle");
      padding=30;      
      var xscale = d3.scaleLinear()
      										.domain([0, d3.max(dataset, function(d){
                            														return d.petal_width})])
      										.range([0+padding,width-padding]);
      
      var yscale = d3.scaleLinear() 
      										.domain([0, d3.max(dataset, function(d){
                            														return d.petal_length})])
      										.range([height-padding,0+padding]);

circles.attr("cx", function(d){ return xscale(d.petal_width) })
      				.attr("cy",function(d){ return yscale(d.petal_length)})
      				.attr("r",5)
      				.attr("fill", function(d){
        						if (d.species=="setosa"){
                      return "rgba(45,164,254,0.5)"
                    } else if (d.species=="versicolor") {
                      return "rgba(55,225,39,0.5)"
                    } else if (d.species=="virginica") {
                      return "rgb(255,50,50)"
                    }})
      				.attr("stroke", "white")
      				.attr("stroke-width","1")
      				.on("mouseenter", function(d) { 
      						d3.select(this).attr("stroke-width","5");
        					svg.append("rect")
                  			.attr("class","provisoire")
                  			.attr("x",xscale(d.petal_width)+10)
      									.attr("y",yscale(d.petal_length)-15)
                  			.attr("width",60)
                  			.attr("height",20)
                  			.style("fill","rgba(0,0,60,0.5)");
      						svg.append("text")
                    		.attr("class","provisoire")
                    		.attr("x",xscale(d.petal_width)+10)
      									.attr("y",yscale(d.petal_length))
      									.text("("+d.petal_width+", "+d.petal_length+")")
      									.style("fill","white")
                  			.style("font-family", "arial");
      						})
      				.on("mouseleave", function(d) { 
      						d3.select(this)
                    	.transition().duration(300).attr("stroke-width","1");
      						svg.selectAll(".provisoire").remove();})
      				;
      				
      				//.attr("data-legend", function(d){ return d.species });
      
      var xAxis = d3.axisBottom(xscale);
      var yAxis = d3.axisLeft(yscale);
      
      svg.append("g")
        	.attr("class", "axis")
        	.attr("transform", "translate(0, "+ (height-padding) + ")")
        	.call(xAxis);
      svg.append("g")
        	.attr("class", "axis")
        	.attr("transform", "translate("+ padding + ",0)")
        	.call(yAxis);
			
      var datax;
      var datay;
      
      dataset.forEach(function(d) {
        datax = +d.petal_width;
        datay = +d.petal_length;
      })
      
      var term1;
      var term2; 
      
      dataset.forEach(function(d){
        // calculate mean x and y
        x_mean = datax/dataset.length;
        y_mean = datay/dataset.length;

// calculate coefficients
        var xr = 0;
        var yr = 0;
        xr = d.petal_width - x_mean;
        yr = d.petal_length - y_mean;
        term1 += xr * yr;
        term2 += xr * xr;

})
      
        var b1 = term1 / term2;
        var b0 = y_mean - (b1 * x_mean);
        // perform regression

yhat = [];
        dataset.forEach(function(d){
            yhat.push(b0 + (d.petal_width * b1));
        })
      
      
      /*legend = svg.append("g")
  				.attr("class","legend")
  				.attr("transform","translate(50,30)")
  				.style("font-size","12px")
  				.call(d3.legend);*/
      var line = d3.line()
        .x(function(d) {
            return xscale(datax);
        })
        .y(function(d) {
            return yscale(yhat);
        });
       svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);
      
    })

</script>
</body>

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