Scatterplot

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
 <title>D3 Scatterplot et scatter plot </title>

<body>
  <script>
    // margin definition 
       var margin = {top: 20, right: 20, bottom: 30, left: 40},
           width = 1000,
           height = 500;
    // graph dimention
    var gf_w = width -margin.left - margin.right;
    var gf_h = height - margin.top - margin.bottom;
    
    
    // Get data 
    // variables 
    
    var Iris_setosa_x=[],
        Iris_setosa_y =[],
        Iris_virginica_x =[],
        Iris_virginica_y=[],
        Iris_vrscolor_x=[],
   			Iris_vrscolor_y=[];
    var iris;
    
    
    d3.csv("iris.csv", function(data)
    {
      iris = data;
     
      data.forEach(function(d){
         if (d["species"] == "virginica")
           {
             Iris_virginica_x.push(+d.petal_length)
          	 Iris_virginica_y.push(+d.sepal_length)
           }
       else if (d["species"] == "setosa") 
          {
            Iris_setosa_x.push(+d.petal_length)
          	Iris_setosa_y.push(+d.sepal_length)
            
          }
        else
          {
            Iris_vrscolor_x.push(+d.petal_length)
            Iris_vrscolor_y.push(+d.sepal_length)
          }
      })
                   });
    
    
    // linear regression function
    function regression(xdt, ydt) {
      
      var TSum = function(xi, xj) { return xi + xj; };
      
      var xmean = xdt.reduce(TSum) * 1.0 / xdt.length;
      var ymean = ydt.reduce(TSum) * 1.0 / ydt.length;

var yScale = d3.scaleLinear()
								 .domain([d3.min(iris, function(d) { return d["sepalwidth"]; }), d3.max(iris, function(d) { return d["sepalwidth"]; })])
								 .range([gf_h, 0]);
    
    // svp creation
    var svg = d3.select("svg")
      .attr("width", 1000)
      .attr("height", 500);
    
                 
    //getting the parameter of regression line 
    
              
    var setosa = regression(Iris_setosa_x, Iris_setosa_y);
      var virginica = regression(Iris_virginica_x, Iris_virginica_y);
      var vrscolor = regression(Iris_vrscolor_x, Iris_vrscolor_y);
    
    
      var x1_s = x(0),
          y1_s = setosa[0] * x1 + setosa[1],
          x2_s = x(d3.max(Iris_setosa_y)),
          y2_s = setosa[0] * x2 + setosa[1];
      var reg1 = [x1_s, y1_s, x2_s, y2_s];
    
    
    // graph 1
     var title = svg.append("g")
        .attr("class", "title")
        .attr("transform",  "translate(" +  60 + "," +0 + ")");

title.append("text")
        .attr("x", 10)
        .attr("y", 105)
        .text("Longueur de sépale en fonction de la longueur de pétale (en cm)")
        .attr("font-family", "sans-serif")
        .attr("font-size", "20px")

// Add graph.
      var graph = svg.append("g")
        .attr("class", 'graph')
        .attr("transform",  "translate(" + margin.left + "," + +(margin.top + 60) + ")");
      
      graph.selectAll(".dot").data(iris).enter()
        .append("path")
        .attr("class", "dot")
        .attr("d", function(d) {  
            return symbol.type(d3.symbols[ scales(d.species) ])(); })
        .attr("transform", function(d,i) {
            return "translate(" + x(d.petal_length) + ", " + y(d.sepal_length) + ")"})
        .attr("fill", function(d){
            return color(d.species)})

// Add the X Axis.
      graph.append("g")
          .attr("transform", "translate(0," + graph_height + ")")
          .call(d3.axisBottom(x));

// Add the Y Axis.
      graph.append("g")
          .call(d3.axisLeft(y));

// Add regression line
      graph.selectAll(".trend").data([reg1]).enter()
        .append("line")
        .attr("class", "trend")
        .attr("x1_s", function(d) { return x(d[0]) })
        .attr("y1_s", function(d) { return y(d[1]) })
        .attr("x2_s", function(d) { return x(d[2]) })
        .attr("y2_s", function(d) { return y(d[3]) })
        .attr('stroke', "red")
    
    });

})
           
      
           })
    
    
    
    
    
    
    
    // Add scale 
    // Add svg

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