Scatterplot Iris

<!DOCTYPE html>
<html>
  <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
        .line {
          stroke: #E4002B;
          fill: none;
          stroke-width: 3;
        }

body {
          font: 11px sans-serif;
        }

.axis path,
        .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }

.dot {
          stroke: #000;
        }

.tooltip {
          position: absolute;
          width: 200px;
          height: 28px;
          pointer-events: none;
        }
      </style>
   </head>
    <body>
      <script src="https://d3js.org/d3.v4.min.js"></script>

// setup x
      var xValue = d => { return d.petal_length;},
      xScale = d3.scaleLinear().range([0, width]),
      xMap = d => { return xScale(xValue(d));}

// setup y
      var yValue = d => { return d.petal_width;},
      yScale = d3.scaleLinear().range([height, 0]),
      yMap = d => { return yScale(yValue(d));}

// setup fill color
      var cValue = d => { return d.species;},
      color = d3.scaleOrdinal(d3.schemeCategory20);

// add the graph canvas to the body of the webpage
      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 + ")");

// add the tooltip area to the webpage
      var tooltip = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

// load data
      d3.csv("iris.csv", (error, data) => {

if (error) throw error;

// change string (from CSV) into number format
        data.forEach(d => {
          d.petal_length = +d.petal_length;
          d.petal_width = +d.petal_width;
        });

// initialize data figures
        data_circle = [];
        data_square = [];
        data_triangle = [];

data.forEach( d => {
          if (d.species == "setosa") {
            data_circle.push(d);
          }
          if (d.species == "versicolor") {
            data_square.push(d);
          }
          if (d.species == "virginica") {
            data_triangle.push(d);
          }
        });

var dataWithMean = updateData(data);

var line = d3.line()
        .x(d => {
            return xScale(d.x);
        })
        .y(d => {
            return yScale(d.yhat);
        });

// don't want dots overlapping axis, so add in buffer to data domain
        xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
        yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);

// Add the X Axis
        svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(xScale));

// Add the Y Axis
        svg.append("g")
        .attr("class", "y axis")
        .call(d3.axisLeft(yScale));

svg.append('text')
        .attr('x', 10)
        .attr('y', 10)
        .attr('class', 'label')
        .text('Petal Width');

svg.append('text')
        .attr('x', width)
        .attr('y', height - 10)
        .attr('text-anchor', 'end')
        .attr('class', 'label')
        .text('Petal Length');

//Draw symbols
        svg.selectAll(".circle")
        .data(data_circle)
        .enter().append("circle")
        .attr("class", "circle")
        .attr("r", 4)
        .attr("cx", xMap)
        .attr("cy", yMap)
        .style("fill", d => { return color(cValue(d));})
        .on("mouseover", d => {
          tooltip.transition()
          .duration(200)
          .style("opacity", .9);
          tooltip.html(d.species + "<br/> (" + xValue(d)
          + ", " + yValue(d) + ")")
          .style("left", (d3.event.pageX + 5) + "px")
          .style("top", (d3.event.pageY - 28) + "px");
        })
        .on("mouseout", d => {
          tooltip.transition()
          .duration(500)
          .style("opacity", 0);
        });

svg.selectAll(".square")
        .data(data_square)
        .enter().append("rect")
        .attr("class", "square")
        .attr("x", xMap)
        .attr("y", yMap)
        .attr("width", 8)
        .attr("height", 8)
        .style("fill", d => { return color(cValue(d));})
        .on("mouseover", d => {
          tooltip.transition()
          .duration(200)
          .style("opacity", .9);
          tooltip.html(d.species + "<br/> (" + xValue(d)
          + ", " + yValue(d) + ")")
          .style("left", (d3.event.pageX + 5) + "px")
          .style("top", (d3.event.pageY - 28) + "px");
        })
        .on("mouseout", d => {
          tooltip.transition()
          .duration(500)
          .style("opacity", 0);
        });

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

// draw legend
        var legend = svg.selectAll(".legend")
        .data(color.domain())
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", (d, i) => { return "translate(0," + i * 20 + ")"; });

// draw legend colored rectangles
        legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);

// draw legend text
        legend.append("text")
        .attr("x", width - 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(d => { return d;})
      });

var updateData = (data) => {

// calculate coefficients
        var xr = 0;
        var yr = 0;
        for (i = 0; i < n; i++) {
          xr = data[i].petal_length - x_mean;
          yr = data[i].petal_width - y_mean;
          term1 += xr * yr;
          term2 += xr * xr;
        }

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

yhat = [];
        // fit line using coeffs
        for (i = 0; i < n; i++) {
          yhat.push(b0 + (data[i].petal_length * b1));
        }

var dataUpdated = [];
        for (i = 0; i < n; i++) {
          dataUpdated.push({
            "yhat": yhat[i],
            "y": data[i].petal_width,
            "x": data[i].petal_length
          })
        }

return (dataUpdated);
      }

</script>
    </body>
</html>

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

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