Iris dataset - MECHTI

<!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 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>

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