D3 Examples - Iris dataset

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
      margin:90;
      position:fixed;
      top:1;
      right:2;
      bottom:2;
      left:2; 
    }
  </style>
</head>
​
<body>
  <script>
          var colors = ["blue", "gold", "red"];
      var margin = {
                top: 30,
                    bottom: 70,
                    left: 70,
                right: 30
                        };
    
            var width = 960 - margin.left - margin.right ;
            var heigth = 500 - margin.top - margin.bottom;
​
            /* Télécharger les attributs du jeu de données Data à partir du fichier iris.csv */
            var dataset;
​
            d3.csv("iris.csv", function(Data) {
                jeu_donnee = Data;
                Data.forEach( function(d){ d["sepal_length"] = +d["sepal_length"]; });
                Data.forEach( function(d){ d["sepal_width"] = +d["sepal_width"]; });  
​
            //Create scale functions for the two axis
            var x_scale = d3.scaleLinear()
                                 .domain([d3.min(jeu_donnee, function(d) { return d["sepal_length"]; }),        d3.max(jeu_donnee, function(d) { return d["sepal_length"]; })])
                                 .range([0, width]);
​
            var y_scale = d3.scaleLinear()
                                 .domain([d3.min(jeu_donnee, function(d) { return d["sepal_width"]; }),          d3.max(jeu_donnee, function(d) { return d["sepal_width"]; })])
                                 .range([heigth, 0]);
        
      /* La création du SGV: */
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", width + margin.left + margin.right )
                        .attr("height", heigth + margin.top + margin.bottom )
                        .append("g")
​
            
      svg.attr("transform",
                "translate(" + (margin.left) + "," + (margin.top) + ")");
​
            /* Ajouter  les points au SVG: */
            svg.selectAll(".point")
               .data(jeu_donnee)
               .enter()
               .append("path")
               .attr("class", "point")
               .attr("d", d3.symbol().type( function(d) {
            if (d["species"] == "virginica") 
                {return d3.symbolStar}
            else  if (d["species"] == "setosa")
                { return d3.symbolDiamond}
            else { return d3.symbolTriangle }
                ;}))
               .attr("fill", function(d) {
            if (d["species"] == "setosa") 
                {return "gold"}
            else  if (d["species"] == "virginica")
                { return "blue"}
            else { return "red" }
                ;})
               .attr("transform", function(d) { return "translate(" + x_scale(d["sepal_length"]) + "," + y_scale(d["sepal_width"]) + ")"; });
​
      //Add the x Axis and its label
        svg.append("g")
                .attr("transform", "translate(0," + heigth + ")")
                .call(d3.axisBottom(x_scale));
​
        svg.append("text")             
                .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (heigth + margin.top + 25 ) + ")")
                .style("text", "middle")
                .text(" Longueur");
​
        /* Ajouter l'axde des Y*/
        
        svg.append("g")
                .call(d3.axisLeft(y_scale));
        
            svg.append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 0 - margin.left)
                .attr("x",0 - (heigth / 2))
                .attr("dy", "1.5em")
                .style("text", "middle")
                .text(" Largeur");
        
   
      
​
      //Calcul des limites du domaine: 
      xmin = d3.min(jeu_donnee, function(d) { return d["sepal_length"]; });
      xmax = d3.max(jeu_donnee, function(d) { return d["sepal_length"]; });
            
        
      /* La regression du chaque attribut: */
        
      var x_datas_virginica = []; 
      var y_datas_virginica = [];
      jeu_donnee.forEach( function(d) {
            if (d["species"] == "virginica")
                { x_datas_virginica.push(d["sepal_length"])
                    y_datas_virginica.push(d["sepal_width"])
                            };
                });
​
      regression_virginica = leastSquaresEquation(x_datas_virginica,y_datas_virginica);
​
            svg.append("line")
                .style("stroke", "blue")
                .attr("x1", x_scale(xmin) )
                .attr("y1" , y_scale(regression_virginica(xmin)))
                .attr("x2", x_scale(xmax) )
                .attr("y2", y_scale(regression_virginica(xmax)));
        
        
      var x_data_setosa = []; 
      var y_data_setosa = [];
      jeu_donnee.forEach( function(d) {
            if (d["species"] == "setosa")
                        { x_data_setosa.push(d["sepal_length"])
                          y_data_setosa.push(d["sepal_width"])
                            };
                });
​
            regression_setosa = leastSquaresEquation(x_data_setosa,y_data_setosa);
​
            svg.append("line")
                .style("stroke", "gold")
                .attr("x1", x_scale(xmin) )
                .attr("y1" , y_scale(regression_setosa(xmin)))
                .attr("x2", x_scale(xmax) )
                .attr("y2", y_scale(regression_setosa(xmax)));
​
​
      var x_data_versi = []; 
      var y_data_versi = [];
      jeu_donnee.forEach( function(d) {
            if (d["species"] == "versicolor")
                        { x_data_versi.push(d["sepal_length"])
                          y_data_versi.push(d["sepal_width"])
                            };
                });
​
            regression_versi = leastSquaresEquation(x_data_versi,y_data_versi);
​
            svg.append("line")
                .style("stroke", "red")
                .attr("x1", x_scale(xmin) )
                .attr("y1" , y_scale(regression_versi(xmin)))
                .attr("x2", x_scale(xmax) )
                .attr("y2", y_scale(regression_versi(xmax)));
​
             });
    
    
    function leastSquaresEquation(x_datas, y_datas) {
      
                var ReduceAddition = function(prev, cur) { return prev + cur; };
    
                /* Calculer les moyennes de x et y de notre jeu de données: */
      
                var x_mean = x_datas.reduce(ReduceAddition) * 1.0 / x_datas.length;
                var y_mean = y_datas.reduce(ReduceAddition) * 1.0 / y_datas.length;
​
                var SquareXX = x_datas.map(function(d) { return Math.pow(d - x_mean, 2); })
                    .reduce(ReduceAddition);
        
                var ssYY = y_datas.map(function(d) { return Math.pow(d - y_mean, 2); })
                    .reduce(ReduceAddition);
          
                var MeanDiffXY = x_datas.map(function(d, i) { return (d - x_mean) * (y_datas[i] - y_mean); })
                    .reduce(ReduceAddition);
​
                var slope = MeanDiffXY / SquareXX;
                var intercept = y_mean - (x_mean * slope);
        
                /* la fonction du regression linéaire: */
                return function(x){
                return x*slope+intercept
                }
​
   }   
    
​
​
  
  
  </script>
</body>
​
​
​
    