D3 Examples - Scatter Plot Iris

xxxxxxxxxx
 
<!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; }
  </style>
</head>
​
<body>
  <script>
    
    var margin = {top: 30, bottom: 20, right: 50, left: 50},
                            height = 400 - margin.bottom - margin.top,
                            width = 800 - margin.right - margin.bottom;
    
    // image entière ffichée à l'écran
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
        .attr("transform","translate("+margin.left+","+margin.top+")");
​
    // définition de l'échelle des abscisses
    var x = d3.scaleLinear()
                        .range([margin.left ,width]);
    
    // définition de l'échelle des ordonnée
    var y = d3.scaleLinear()
                        .range([height-margin.bottom, margin.top]);
​
    // création des axes des abcsisses et ordonnées
    var abscisse = d3.axisBottom()
                                     .scale(x);
    var ordonnee = d3.axisLeft()
                                     .scale(y);
    
    
    var g = svg.append("g");
    
    function regression(data){
      var moyenne_X = 0;
      var moyenne_Y = 0;
      var term1 = 0;
      var term2 = 0;
      var n=150;
      for(i=0;i<n;i++){
        moyenne_X += +data[i].sepal_length
        moyenne_Y += +data[i].sepal_width
      }
      moyenne_X /= n;
      moyenne_Y /= n;
      
      var xr = 0;
      var yr = 0;
      for(i=0;i<n;i++){
        xr = +data[i].sepal_length - moyenne_X;
        yr = +data[i].sepal_width - moyenne_Y;
        term1 += xr * yr;
        term2 += xr * xr;
      }
      var b1 = term1 / term2;
      var b0 = moyenne_Y - (b1 * moyenne_X);
      
      yhat=[];
      for (i = 0; i < 150; i++) {
            yhat.push(b0 + (+data[i].sepal_length * b1));
        }
      var donnees = [];
      for (i = 0; i < 150; i++) {
           donnees.push({
                "yhat": yhat[i],
                "ord": +data[i].sepal_width,
                "abs": +data[i].sepal_length,
            })
      }
      return (donnees);
    }
 
    
//chargement des données dans les listes
d3.csv("iris.csv",function(data){
​
    // on définit des variables que l'on pourra appeller
    data.forEach(function(d){
        d.sepal_length = +d.sepal_length;
        d.sepal_width = +d.sepal_width;
        d.petal_length = +d.petal_length;
        d.petal_width = +d.petal_width;
        d.species = d.species;
        
    })
    
    // on définit les intervalles x et y
    x.domain([4.2,d3.max(data,function(d){return d.sepal_length;})]);
    y.domain(d3.extent(data,function(d){return d.sepal_width;}));
    
        // ajout des axes
    svg.append("g")
                                            .attr("class","x axis")
                                            .attr("transform","translate(0,"+height+")")
                        .call(abscisse);
    svg.append("g")
                                            .attr("class","y axis")
                                            .attr("transform","translate("+50+",0)")
                        .call(ordonnee);
  
    
    // création des points
    svg.selectAll("points").data(data)
                                            .enter()
                                            .append("path")
                                            .attr("class","point")
                                            .attr("d",d3.symbol().type(d3.symbolDiamond))
    
    /*svg.selectAll("points").attr("d",function(d){
      if(d.species=='setosa'){return d3.symbol().type(d3.symbolSquare);}
      else if (d.species=='versicolor'){return d3.symbol().type(d3.symbolDiamond);}
      else {return d3.symbol().type(d3.symbolCross);};})*/
      
                                            .attr("transform", function(d) { return "translate(" + x(d.sepal_length) + "," + y(d.sepal_width) + ")" ;})
                                          .style("fill","#22CE40")
         
  
    svg.append("text")
                                            .attr("x",width*0.5)
                                            .attr("y",margin.top)
                                            .text("Sepal width = fct(sepal length)");
  
    
    var mes_donnees = regression(data);
  
    mes_donnees.forEach(function(d){
      d.abs =  +d.abs;
      d.ord = +d.ord;
      d.yhat = +d.yhat;
    })
    
    var line = d3.line()
        .x(function(d){return x(d.abs);})
        .y(function(d){return y(d.yhat);});
  
    g.append("path")
        .datum(mes_donnees)
        .attr("class", "line")
            .attr("stroke","steelblue")
            .attr("stroke-width", 2)
        .attr("d", line);
    });
  </script>
</body>
​
    