Mathilde_TD2

forked from MathReynaud's block: Mathilde_TD2

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

var margin = {
            	top: 20,
            	right: 20,
            	bottom: 50,
            	left: 70
        				};
			var w = 1100 - margin.left - margin.right ;
			var h = 500 - margin.top - margin.bottom;

//Upload Data 
 			var dataset;

d3.csv("iris3.csv", function(data) {
				dataset = data;
				data.forEach( function(d){ d["sepallength"] = +d["sepallength"]; });
				data.forEach( function(d){ d["sepalwidth"] = +d["sepalwidth"]; });

//Create scale functions
			var xScale = d3.scaleLinear()
								 .domain([d3.min(dataset, function(d) { return d["sepallength"]; }), d3.max(dataset, function(d) { return d["sepallength"]; })])
								 .range([0, w]);

var yScale = d3.scaleLinear()
								 .domain([d3.min(dataset, function(d) { return d["sepalwidth"]; }), d3.max(dataset, function(d) { return d["sepalwidth"]; })])
								 .range([h, 0]);

//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w + margin.left + margin.right )
						.attr("height", h + margin.top + margin.bottom )
						.append("g")

// moves the 'group' element to the top left margin
      		svg.attr("transform",
      			"translate(" + margin.left + "," + margin.top + ")");

//Add the points
			svg.selectAll(".point")
			   .data(dataset)
			   .enter()
			   .append("path")
			   .attr("class", "point")
			   .attr("d", d3.symbol().type( function(d) {
            if (d["species"] == "setosa") 
            	{return d3.symbolTriangle}
            else  if (d["species"] == "virginica")
            	{ return d3.symbolCross}
            else { return d3.symbolStar }
        		;}))
			   .attr("fill", function(d) {
			if (d["species"] == "setosa") 
            	{return "red"}
            else  if (d["species"] == "virginica")
            	{ return "orange"}
            else { return "blue" }
        		;})
			   .attr("transform", function(d) { return "translate(" + xScale(d["sepallength"]) + "," + yScale(d["sepalwidth"]) + ")"; });

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

// text label for the x axis
  			svg.append("text")             
      			.attr("transform",
            "translate(" + (w/2) + " ," + 
                           (h + margin.top + 20 ) + ")")
      			.style("text-anchor", "middle")
      			.text("Sepal Lenght ");

// Add the y Axis
  			svg.append("g")
      			.call(d3.axisLeft(yScale));

// text label for the y axis
 			 svg.append("text")
      			.attr("transform", "rotate(-90)")
      			.attr("y", 0 - margin.left)
      			.attr("x",0 - (h / 2))
      			.attr("dy", "1em")
      			.style("text-anchor", "middle")
      			.text("Sepal Widht");

//Calcul des limites du domaine
      		xmin = d3.min(dataset, function(d) { return d["sepallength"]; });
      		xmax = d3.max(dataset, function(d) { return d["sepallength"]; });

// Regression pour Setosa
      		var XaxisDataS = []; 
      		var YaxisDataS = [];
      		dataset.forEach( function(d) {
      				if (d["species"] == "setosa")
      					{ XaxisDataS.push(d["sepallength"])
      					 YaxisDataS.push(d["sepalwidth"])
      					 	};
      			});

regressionS = leastSquaresequation(XaxisDataS,YaxisDataS);

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

//Regression pour Virginica
      		var XaxisDataV = []; 
      		var YaxisDataV = [];
      		dataset.forEach( function(d) {
      				if (d["species"] == "virginica")
      					{ XaxisDataV.push(d["sepallength"])
      					 YaxisDataV.push(d["sepalwidth"])
      					 	};
      			});

regressionV = leastSquaresequation(XaxisDataV,YaxisDataV);

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

//Regression pour Versicolor
      		var XaxisDataC = []; 
      		var YaxisDataC = [];
      		dataset.forEach( function(d) {
      				if (d["species"] == "versicolor")
      					{ XaxisDataC.push(d["sepallength"])
      					 YaxisDataC.push(d["sepalwidth"])
      					 	};
      			});

regressionC = leastSquaresequation(XaxisDataC,YaxisDataC);

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

});

function leastSquaresequation(XaxisData, YaxisData) {
	    		var ReduceAddition = function(prev, cur) { return prev + cur; };
	    		//console.log(XaxisData)
	    		//console.log(YaxisData)

// finding the mean of Xaxis and Yaxis data
	    		var xBar = XaxisData.reduce(ReduceAddition) * 1.0 / XaxisData.length;
	    		var yBar = YaxisData.reduce(ReduceAddition) * 1.0 / YaxisData.length;
    			console.log(XaxisData.reduce(ReduceAddition))

var slope = MeanDiffXY / SquareXX;
	    		var intercept = yBar - (xBar * slope);
	    
				// returning regression function
	    		return function(x){
	      		return x*slope+intercept
				}

}

</script>
</body>

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