Mathilde_TP2

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Drawing with iris data</title>
		<script src="https://d3js.org/d3.v4.min.js"></script>
		<style type="text/css">
			/* No style rules here yet */		
		</style>
	</head>
	<body>
		<script type="text/javascript">
 			
 			 var margin = {
            	top: 20,
            	right: 20,
            	bottom: 50,
            	left: 70
        				};
			var w = 1000 - 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");
        
      		//Limits of the domain
      		xmin = d3.min(dataset, function(d) { return d["sepallength"]; });
      		xmax = d3.max(dataset, function(d) { return d["sepallength"]; });
        
      		// Regression for 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 for 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 for 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; };
 
        
	    		// 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 SquareXX = XaxisData.map(function(d) { return Math.pow(d - xBar, 2); })
	      			.reduce(ReduceAddition);
	    
	    		var ssYY = YaxisData.map(function(d) { return Math.pow(d - yBar, 2); })
	      			.reduce(ReduceAddition);
	      
	    		var MeanDiffXY = XaxisData.map(function(d, i) { return (d - xBar) * (YaxisData[i] - yBar); })
	      			.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