D3 Examples - Scatterplot Iris

xxxxxxxxxx
 
<!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>
​
      <script>
      // set the dimensions and margins of the graph
      var margin = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 40
        },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
​
      // 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);
        });
​
        var triangle = d3.symbol().type(d3.symbolTriangle);
        svg.selectAll(".triangle")
        .data(data_triangle)
        .enter()
        .append("path")
        .attr("class", "triangle")
        .attr('d', triangle)
        .attr('transform', d => {
          return "translate(" + xMap(d) + "," + yMap(d) + ")";
        })
        .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) => {
​
        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_mean = x_values.reduce(function(a, b) { return a + b; })/n;
        var y_mean = y_values.reduce(function(a, b) { return a + b; })/n;
        
        var term1 = 0;
        var term2 = 0;
​
        // 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>
​
    