Travail maison

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
      margin:30;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0; 
    }
  </style>
</head>

<body>
  <script>
		  var colors = ["blue", "lightblue", "pink"];
      var margin = {
            	top: 20,
      				bottom: 60,
      				left: 60,
            	right: 20
        				};
    
			var width = 960 - margin.left - margin.right ;
			var heigth = 500 - margin.top - margin.bottom;

//Loading the attributes dataset from the CSV file
 			var dataset;

d3.csv("iris.csv", function(data) {
				dataset = 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 xScale = d3.scaleLinear()
								 .domain([d3.min(dataset, function(d) { return d["sepal_length"]; }), d3.max(dataset, function(d) { return d["sepal_length"]; })])
								 .range([0, width]);

var yScale = d3.scaleLinear()
								 .domain([d3.min(dataset, function(d) { return d["sepal_width"]; }), d3.max(dataset, function(d) { return d["sepal_width"]; })])
								 .range([heigth, 0]);
        
      //Create the SVG parent element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", width + margin.left + margin.right )
						.attr("height", heigth + margin.top + margin.bottom )
						.append("g")

//We center the group element to leave space on the sides
      svg.attr("transform",
      			"translate(" + (margin.left) + "," + (margin.top) + ")");

//We add all the points to the svg parent
			svg.selectAll(".point")
			   .data(dataset)
			   .enter()
			   .append("path")
			   .attr("class", "point")
			   .attr("d", d3.symbol().type( function(d) {
            if (d["species"] == "virginica") 
            	{return d3.symbolCircle}
            else  if (d["species"] == "setosa")
            	{ return d3.symbolDiamond}
            else { return d3.symbolStar }
        		;}))
			   .attr("fill", function(d) {
			if (d["species"] == "setosa") 
            	{return "lightblue"}
            else  if (d["species"] == "virginica")
            	{ return "blue"}
            else { return "pink" }
        		;})
			   .attr("transform", function(d) { return "translate(" + xScale(d["sepal_length"]) + "," + yScale(d["sepal_width"]) + ")"; });

//Add the x Axis and its label
  		svg.append("g")
      			.attr("transform", "translate(0," + heigth + ")")
      			.call(d3.axisBottom(xScale));

svg.append("text")             
      			.attr("transform",
            "translate(" + (width/2) + " ," + 
                           (heigth + margin.top + 20 ) + ")")
      			.style("text-anchor", "middle")
      			.text("Sepal Length");

// Add the y Axis
  		svg.append("g")
      			.call(d3.axisLeft(yScale));
        
 			svg.append("text")
      			.attr("transform", "rotate(-90)")
      			.attr("y", 0 - margin.left)
      			.attr("x",0 - (heigth / 2))
      			.attr("dy", "1.5em")
      			.style("text-anchor", "middle")
      			.text("Sepal Width");

//Calcul des limites du domaine
      xmin = d3.min(dataset, function(d) { return d["sepal_length"]; });
      xmax = d3.max(dataset, function(d) { return d["sepal_length"]; });
			
        
      //Regression for Virginica species
      var x_datas_virgin = []; 
      var y_datas_virgin = [];
      dataset.forEach( function(d) {
      		if (d["species"] == "virginica")
      			{ x_datas_virgin.push(d["sepal_length"])
      				y_datas_virgin.push(d["sepal_width"])
      					 	};
      			});

regression_virginica = leastSquaresEquation(x_datas_virgin,y_datas_virgin);

svg.append("line")
				.style("stroke", "blue")
				.attr("x1", xScale(xmin) )
				.attr("y1" , yScale(regression_virginica(xmin)))
				.attr("x2", xScale(xmax) )
				.attr("y2", yScale(regression_virginica(xmax)));
        
        
			//Regression for Setosa species
      var x_datas_setosa = []; 
      var y_datas_setosa = [];
      dataset.forEach( function(d) {
      		if (d["species"] == "setosa")
      					{ x_datas_setosa.push(d["sepal_length"])
      					  y_datas_setosa.push(d["sepal_width"])
      					 	};
      			});

regression_setosa = leastSquaresEquation(x_datas_setosa,y_datas_setosa);

svg.append("line")
				.style("stroke", "lightblue")
				.attr("x1", xScale(xmin) )
				.attr("y1" , yScale(regression_setosa(xmin)))
				.attr("x2", xScale(xmax) )
				.attr("y2", yScale(regression_setosa(xmax)));

//Regression for Versicolor species
      var x_datas_versi = []; 
      var y_datas_versi = [];
      dataset.forEach( function(d) {
      		if (d["species"] == "versicolor")
      					{ x_datas_versi.push(d["sepal_length"])
      					  y_datas_versi.push(d["sepal_width"])
      					 	};
      			});

regression_versi = leastSquaresEquation(x_datas_versi,y_datas_versi);

svg.append("line")
				.style("stroke", "pink")
				.attr("x1", xScale(xmin) )
				.attr("y1" , yScale(regression_versi(xmin)))
				.attr("x2", xScale(xmax) )
				.attr("y2", yScale(regression_versi(xmax)));

});
    
 
    
    function leastSquaresEquation(x_datas, y_datas) {
      
	    		var ReduceAddition = function(prev, cur) { return prev + cur; };
	
	    		//We find the means of x and y datas
      
	    		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);
	    
				// returning regression function
	    		return function(x){
	      		return x*slope+intercept
				}

}

</script>
</body>

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