DM Cours 2 scatterplot iris fork cours 3

forked from kaboo-dev's block: DM Cours 2 scatterplot iris

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis path, .axis line {
/*   fill: none;
  stroke: #000;
  shape-rendering: crispEdges; */
}
  .dot {
    stroke: #000;
  }
  
	/* setosa */
  .fig1 {
    stroke: #000;
    fill: brown;
  }
	/* versicolor */
  .fig2 {
    stroke: #000;
    fill: magenta;
  }
	/* virginica */
  .fig3 {
    stroke: #000;
    fill: cyan;    
  }
  
  .line {
    stroke: #E4002B;
    fill: none;
    stroke-width: 3;
  }
  
  .disabled {
    display: none;
  }

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

d3.csv('iris.csv', function(error, data){
  
  //////////////
  // Initialize data regression
	//////////////
  speciesArray = ['Setosa', 'Versicolor', 'Virginica'];
  
  var n = data.length;
  
  var x_values = data.map(function(el){return +el.petal_length});
  var y_values = data.map(function(el){return +el.petal_width});
  
  var x_moy = x_values.reduce(function(a, b) { return a + b; })/n;
  var y_moy = y_values.reduce(function(a, b) { return a + b; })/n;
  
  var term1 = 0;
  var term2 = 0;
  
  var xr = 0;
  var yr = 0;
  for (i = 0; i < x_values.length; i++) {
    xr = x_values[i] - x_moy;
    yr = y_values[i] - y_moy;
    term1 += xr * yr;
    term2 += xr * xr;
  }
  var b1 = term1 / term2;
  var b0 = y_moy - (b1 * x_moy);
  
  yhat = [];
  for (i = 0; i < x_values.length; i++) {
    yhat.push(b0 + (x_values[i] * b1));
  }
  
  var meanData = [];
  for (i = 0; i < y_values.length; i++) {
    meanData.push({
      "yhat": yhat[i],
      "y": y_values[i],
      "x": x_values[i]
    })
  }
  
  //////////////
  // Initialize data figures
	//////////////
  data_1 = [];
  data_2 = [];
  data_3 = [];
  
  data.forEach(function(el){
    if (el.species == "setosa") {
      data_1.push(el);
    }
    if (el.species == "versicolor") {
      data_2.push(el);
    }
    if (el.species == "virginica") {
      data_3.push(el);
    }
  });
  
  
	//////////////
  // Initialize svg
	//////////////
  var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height",500)
  	.append("g")
    .attr("transform", "translate(40,20)");

//////////////
  // X Axis
	//////////////
  var x = d3.scaleLinear().range([0, 900]);

x.domain([0,8]);
  
  var xAxis = d3.axisBottom().scale(x);

svg.append('g')
  	.attr('transform', 'translate(0,450)')
  	.attr('class', 'x axis')
  	.call(xAxis);
  
  svg.append('text')
		.attr('x', 900)
		.attr('y', 450 - 10)
		.attr('text-anchor', 'end')
		.attr('class', 'label')
		.text('Petal Length');
  
	//////////////
  // Y Axis
	//////////////
	var y = d3.scaleLinear().range([450, 0]);
	
  y.domain([0,4]);
  
	var yAxis = d3.axisLeft()
		.scale(y);

svg.append('g')
    .attr('transform', 'translate(0,0)')
    .attr('class', 'y axis')
    .call(yAxis);  
  
  svg.append('text')
		.attr('x', 10)
		.attr('y', 10)
		.attr('class', 'label')
		.text('Petal Width');

//////////////
  // Droite regression
	//////////////  
  var line = d3.line()
  .x(function(d) {return x(d.x)})
  .y(function(d){return y(d.yhat)});
  
  svg.append("path")
    .datum(meanData)
    .attr("class", "line")
    .attr("d", line);
  
	//////////////
  // Figures
	//////////////
  var arc1 = d3.symbol().type(d3.symbolStar);
  svg.selectAll(".fig1")
    .data(data_1)
  	.enter()
    .append("path")
  	.attr('d',arc1)
    .attr("class", "fig fig1")
    .attr('transform', function(d) {
      return "translate(" + x(d.petal_length) + "," + y(d.petal_width) + ")";
    })
  
  var arc2 = d3.symbol().type(d3.symbolDiamond);
  svg.selectAll(".dig2")
    .data(data_2)
  	.enter()
    .append("path")
  	.attr('d',arc2)
    .attr("class", "fig fig2")
    .attr('transform', function(d) {
      return "translate(" + x(d.petal_length) + "," + y(d.petal_width) + ")";
    })

var arc3 = d3.symbol().type(d3.symbolCross);
  svg.selectAll(".fig3")
    .data(data_3)
  	.enter()
    .append("path")
  	.attr('d',arc3)
    .attr("class", "fig fig3")
    .attr('transform', function(d) {
      return "translate(" + x(d.petal_length) + "," + y(d.petal_width) + ")";
    })

//////////////
	// Legende
	//////////////
  var legend = svg.selectAll(".legend")
    .data(speciesArray)
  	.enter().append("g")
    .attr("class", function(d,i) {return "legend " + d.toLowerCase();})
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

var legendCircle = svg.select(".setosa");
  legendCircle
  .append("path")
  	.attr('d',arc1)
    .attr("class", "fig1")
    .attr('transform', function(d) {
      return "translate(891,10)";
    })
  
  var clicked = null;
  legend.on("click", function(d) {

d3.selectAll(".fig").style("opacity", 1)
      
      console.log(d3.selectAll(".fig"))
          
    	if(clicked !== d) {
        
        d3.selectAll(".fig")
          .filter(function(e) {
          return e.species !== d.toLowerCase()
        })
        .style("opacity", 0.1)
    		clicked = d;
      } else {
        clicked = null;
      }
        
  	})
  
  var legendSquare = svg.select(".versicolor");
  legendSquare
    .append("path")
  	.attr('d',arc2)
    .attr("class", "fig2")
    .attr('transform', function(d) {
      return "translate(891,10)";
    })
  
  var legendTriangle = svg.select(".virginica");
  legendTriangle
  	.append("path")
  	.attr('d',arc3)
    .attr("class", "fig3")
    .attr('transform', function(d) {
      return "translate(891,10)";
    })

legend.append("text")
      .attr("x", 900 - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});
  
</script>

Modified http://d3js.org/d3.v4.min.js to a secure url

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