D3 Examples - Interactive iris regression

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      font-family: sans-serif;
        }
    
    .line {
        stroke: grey;
        stroke-width: 3;
        }
    
    .popup {
      fill: red;
      font-weight: bold;
    }
  </style>
</head>
​
<body>
  <script>
    // Margin setup
    var margin = {
            top: 20,
            right: 20,
            bottom: 60,
            left: 60
        },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
​
    // Basic SVG canvas
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    // Each species will have one of this array's colors
    var color = d3.scaleOrdinal(d3.schemeCategory10);
    
    // Format to display the coefficients of the regression equation
    var format = d3.format(".2f");
    
    // Function to move an element to the foreground
    d3.selection.prototype.moveToFront = function() {
      return this.each(function(){
        this.parentNode.appendChild(this);
      });
    };
    
    // Function to move an element to the background
    d3.selection.prototype.moveToBack = function() {
      return this.each(function() {
        var firstChild = this.parentNode.firstChild;
        if (firstChild) {
          this.parentNode.insertBefore(this, firstChild);
        } 
      });
    };
    
    // Function to give each species its symbol
    symbol = function(x){
      if (x=="setosa"){return d3.symbolCircle}
      else if (x=="versicolor"){return d3.symbolSquare}
      else if (x=="virginica"){return d3.symbolTriangle}
    };
    
    d3.csv("iris.csv", function(data) {
      data.forEach(function(d) {
        
        // Conversion into numbers
            d.petal_length = +d.petal_length;
            d.petal_width = +d.petal_width;
      });
      
      var x = d3.scaleLinear()
            .domain([0,d3.max(data, function (d){return d.petal_length})])  
            .range([0, width]);
      
      var y = d3.scaleLinear()
            .domain([0,d3.max(data, function (d){return d.petal_width})])
            .range([height, 0]);
      
      svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
      
      svg.append("g")
        .call(d3.axisLeft(y))
      
      // Label of the x-axis
      svg.append("text")
        .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + margin.top + 20) + ")")
        .attr("class","axis")
        .style("text-anchor", "middle")
        .text("Petal length");
      
      // Label of the y-axis
        svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x",0 - (height / 2))
        .attr("dy", "1em")
        .attr("class","axis")
        .style("text-anchor", "middle")
        .text("Petal width");      
​
      var g = svg.selectAll("g").data(data).enter().append("g")
        .attr("transform", function(d) {
            return "translate(" + x(d.petal_length) + "," + y(d.petal_width) + ")"})
        .append("path")
        .attr("d", d3.symbol().type(function(d) {return symbol(d.species)}))
        .style("fill",function(d){return color(d.species)})
      
        .on("mouseover", function(d){
            d3.select(this).transition()
            .style("fill", "red")
            .attr("d", d3.symbol()
                  .size(200)
                  .type(function(d) {return symbol(d.species)})
                 );
​
          
          var parentNode = d3.select(this.parentNode).moveToFront();
          
          // Show the x value (petal_length)
          parentNode.append("text")
            .attr("class","popup")
            .attr("transform","translate(" + -70 + " ," + -50 + ")")
            .text(function(d) {return "x: " + d.petal_length});
          
          // Show the y value (petal_width)
          parentNode.append("text")
            .attr("class","popup")
            .attr("transform","translate(" + -70 + " ," + -30 + ")")
            .text(function(d) {return "y: " + d.petal_width});
          
          parentNode.append("text")
            .attr("class","popup")
            .attr("transform","translate(" + -70 + " ," + -10 + ")")
            .text(function(d) {return d.species});
        })
      
        .on("mouseout", function(d) {
          d3.select(this).transition()
            .style("fill", color(d.species))
            .attr("d", d3.symbol().type(function(d) {return symbol(d.species)}));
          
          svg.selectAll(".popup").remove();
        });;
      
      var length_mean = d3.mean(data, function(d){return d.petal_length});
      var width_mean = d3.mean(data, function(d){return d.petal_width});
      
      // Calculate coefficients b0 and b1
      var xr = 0;
      var yr = 0;
      var term1 = 0;
      var term2 = 0;
      data.forEach(function(d){
        xr = d.petal_length - length_mean;
        yr = d.petal_width - width_mean;
        term1 += xr * yr;
        term2 += xr * xr;
        })
      
      var b1 = term1 / term2;
      var b0 = width_mean - (b1 * length_mean);
      
      // Returns the sign of a number
        sign = function(x){return x < 0 ? " - " : " + ";};
      
      // Returns the parameter as a positive number
      positive = function(x){return x < 0 ? -x : x;}
      
      // We need two points to draw a line, so we create (x1,y1) and (x2,y2)
      var x1 = d3.min(data, function(d){return d.petal_length});
      var x2 = d3.max(data, function(d){return d.petal_length});
      var y1 = b1 * x1 + b0;
      var y2 = b1 * x2 + b0;
      
      var line_points = [[x1,y1],[x2,y2]]
      
      var line = d3.line()
        .x(function(d) { return x(d[0]); })
        .y(function(d) { return y(d[1]); });
        
      // The regression line will be in the background
      svg.append("path").moveToBack()
        .datum(line_points)
        .attr("class", "line")
        .attr("d", line);
      
      svg.append("text")
        .attr("transform", function(d) {
            return "translate(" + 40 + "," + 30 + ")"; })
        .text("Equation: y = " + format(b1) + "x" + sign(b0) + format(positive(b0)));
    });
  </script>
</body>
​
    