D3 Examples - DM Cours 2 scatterplot iris

xxxxxxxxxx
 
<!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;
  }
​
</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_circle = [];
  data_square = [];
  data_triangle = [];
  
  data.forEach(function(el){
    if (el.species == "setosa") {
      data_circle.push(el);
    }
    if (el.species == "versicolor") {
      data_square.push(el);
    }
    if (el.species == "virginica") {
      data_triangle.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(".circle")
    .data(data_circle)
    .enter()
    .append("path")
    .attr('d',arc1)
    .attr("class", "fig1")
    .attr('transform', function(d) {
      return "translate(" + x(d.petal_length) + "," + y(d.petal_width) + ")";
    })
  
  var arc2 = d3.symbol().type(d3.symbolDiamond);
  svg.selectAll(".square")
    .data(data_square)
    .enter()
    .append("path")
    .attr('d',arc2)
    .attr("class", "fig2")
    .attr('transform', function(d) {
      return "translate(" + x(d.petal_length) + "," + y(d.petal_width) + ")";
    })
​
 
  var arc3 = d3.symbol().type(d3.symbolCross);
  svg.selectAll(".triangle")
    .data(data_triangle)
    .enter()
    .append("path")
    .attr('d',arc3)
    .attr("class", "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 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>
    