scatter_fin

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    svg {
      font: 10px sans-serif;
    }
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
  </style>
</head>
<body>
  <svg width="550" height="550">
  </svg>
  <p>
    MEAN(width) = <span id="mean-width"></span>, MEAN(length) = <span id="mean-length"></span>
  </p>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>

  <script>

    function ready(fn) {
      if (document.readyState != 'loading'){
        fn();
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    }

    ready(init);

    function init() {

      data.forEach(function(d) {
        d.length = parseFloat(d.length);
        d.width = parseFloat(d.width);
      });

      let svg = d3.select('svg');
      let width = 500;
      let height = 500;

      let x = d3.scaleLinear()
                .domain([
                  d3.min(data, d => d.width),
                  d3.max(data, d => d.width)
                ])
                .range([50, width + 50]);
      let y = d3.scaleLinear()
                .domain([
                  d3.min(data, d => d.length),
                  d3.max(data, d => d.length)
                ])
                .range([height, 0]);

      let color = d3.scaleOrdinal()
                    .domain(['setosa', 'versicolor', 'virginica'])
                    .range(['#3366cc', '#dc3912', '#ff9900']);

      svg
        .selectAll('circle')
        .data(data)
        .enter()
          .append('circle')
          .attr('r', 3.5)
          .attr('cx', d => x(d.width))
          .attr('cy', d => y(d.length))
          .style('fill', d => color(d.species));

      let xAxis = d3.axisBottom(x);
      let yAxis = d3.axisLeft(y);

      svg
        .append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0, ' + height + ')')
        .call(xAxis);

      svg
        .append('g')
        .attr('class', 'y axis')
        .attr('transform', 'translate(50, 0)')
        .call(yAxis);


    }

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