Iris Species with lin reg and mouseover

forked from Jboulery's block: Iris Species with lin reg and mouseover

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Tutorial 2 D3</title>
  <style>
  	.axis line, .axis path{
		fill: none;
		stroke: black;
		shape-rendering: crispEdges;
	}

.axis text{
		font-family: sans-serif;
		font-size: 10px;
	}

.line {
	    stroke: #000000;
	    fill: none;
	    stroke-width: 2;
}
  </style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
	<script type="text/javascript">
		var dataset;

var w = 900;
		var h = 500;
		var padding = 0;

var margin = {top: 50, right: 180, bottom: 30, left: 50};
		var width = w - margin.right - margin.left;
		var height = h - margin.top - margin.bottom;

var svg = d3.select("body")
					.append("svg")
					.attr("width", w)
					.attr("height", h)
					.append("g")
					.attr("transform", "translate(" + margin.left +", " + margin.top + ")");

d3.csv("iris.csv", function(data){
			dataset = data;
			//console.log(dataset);

var xScale = d3.scaleLinear()
							.domain([0, d3.max(dataset, function(d){ return d.petal_length; })])
							.range([0, width]);
			var yScale = d3.scaleLinear()
							.domain([0, d3.max(dataset, function(d){ return d.petal_width; })])
							.range([height, 0]);

var xAxis = d3.axisBottom(xScale);
			var yAxis = d3.axisLeft(yScale);

svg.append("g")
				.attr("class", "axis")
				.call(yAxis);

svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(0, " + height + ")")
				.call(xAxis);

var path = svg.selectAll("path")
				.data(dataset)
				.enter()
				.append("path")

var color = d3.scaleOrdinal(d3.schemeCategory10);

// Pour l'affichage des coordonnees au survol des points
			var g = svg.append("g")
						.attr("transform", "translate(10, 0)");
				
			path.attr("transform", function(d) { return "translate(" + xScale(d.petal_length) + ", " + yScale(d.petal_width) + ")"; })
				.attr("d", d3.symbol()
								.type(function(d){
									if (d.species == 'setosa'){
										return d3.symbolCircle;
									}
									else if (d.species == 'versicolor') {
										return d3.symbolCross;
									}
									else if (d.species == 'virginica') {
										return d3.symbolDiamond;
									}
									else {
										return d3.symbolSquare;
									}
								}))
				.style("fill", function(d){ return color(d.species); })
				.on("mouseover", function(d){
					g.selectAll("#tooltip").data([d]).enter().append("text")
						.attr("id", "tooltip")
						.text(function(d){ return 'x = ' + d.petal_length + ' | y = ' + d.petal_width; })
						.attr("x", function(d){ return d.petal_length; })
						.attr("y", function(d){ return d.petal_width; })
						.attr("transform", function(d){ return 'translate(' + xScale(d.petal_length) + ', ' + yScale(d.petal_width) + ')'; });
				})
				.on("mouseout", function(d){
					g.selectAll("#tooltip").remove();
				});

// Regression lineaire

// Moyennes petal_length et petal_width
			var x_mean = d3.mean(dataset, function(d){ return d.petal_length; });
			var y_mean = d3.mean(dataset, function(d){ return d.petal_width; });

// Coefficients
			
			var xr = 0;
			var yr = 0;
			var term1 = 0;
			var term2 = 0;
			for (var i=0; i< dataset.length; i++){
				xr = parseFloat(dataset[i].petal_length) - x_mean;
				yr = parseFloat(dataset[i].petal_width) - y_mean;
				term1 += xr * yr;
				term2 += xr * xr;
				}

var b1 = term1 / term2;
			var b0 = y_mean - (b1 * x_mean);

for (i=0; i< dataset.length; i++){
				dataset[i].lin_reg_term = b0 + (dataset[i].petal_length * b1); 
				}

// Trace la droite
			var line = d3.line()
				.x(function(d){ return xScale(d.petal_length); })
				.y(function(d){ return yScale(d.lin_reg_term); });

svg.append("path")
				.datum(dataset)
				.attr("class", "line")
				.attr("d", line);

// Ajout de l'equation
			document.getElementById("equation").innerHTML = "y = " + b0 + ' + ' + b1 + "x" ;

// Legende

var legendRectSize = 18;
	        var legendSpacing = 4;

var legend = svg.selectAll('.legend')
	          .data(['setosa', 'versicolor', 'virginica'])
	          .enter()
	          .append('g')
	          .attr('class', 'legend')
	          .attr('transform', function(d, i){
	          	var horizontal_offset = 2 * legendRectSize ;
	          	var vertical_offset = i * (legendRectSize + legendSpacing) - (legendRectSize + legendSpacing)/ 3 / 2;
	          	return 'translate(' + horizontal_offset + ', ' + vertical_offset + ')';
	          });

legend.append('rect')
	        	.attr('width', legendRectSize)
	        	.attr('height', legendRectSize)
	        	.style('fill', color)
	        	.style('stroke', color);

legend.append('text')
		        .attr('x', legendRectSize + legendSpacing)
		        .attr('y', legendRectSize - legendSpacing)
		        .text(function(d) { return d; });

});

</script>
	<div id="equation"></div>
</body>
</html>

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