cuarteto de Anscombe

<!DOCTYPE html>
<html>
  <head>
    <title>Cuarteto de Anscombe</title>
    <meta charset=utf-8 />
    <script src="//d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <p>
      <button id="i" type="button">I</button>
      <button id="ii" type="button">II</button>
      <button id="iii" type="button">III</button>
      <button id="iv" type="button">IV</button>
    </p>
 
    <div id="viz"></div>
 
    <table>
      <tr> 
        <td>Media de cada una de las variables x</td>
        <td>9</td>
      </tr>
      <tr>
        <td>Varianza de cada una de las variables x</td>
        <td>11</td>
      </tr>
      <tr>
        <td>Media de cada una de las variables y</td>
        <td>7.50</td>
      </tr>
      <tr>
        <td>Varianza de cada una de las variables y</td>
        <td>4.1</td>
      </tr>
      <tr>
        <td>Correlaci&oacute;n entre cada una de las variables x e y</td>
        <td>0.82</td>
      </tr>
      <tr>
        <td>Recta de regresi&oacute;n</td>
        <td>y = 3 + 0.5 x</td>
      </tr>
    </table>
 
    <p><a href="https://es.wikipedia.org/wiki/Cuarteto_de_Anscombe">mas informaci&oacute;n en la wikipedia</a></p>
 
    <script>
    var width = 250;
    var height = 250;
 
    var svg = d3.select("#viz")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
 
    var x = d3.scaleLinear()
                    .domain ([0, 20])
                    .range([0, width]);
    var y = d3.scaleLinear()
                    .domain ([0, 20])
                    .range([height, 0]);
 
    var datos = [[10,8.04],[8,6.95],[13,7.58],[9,8.81],[11,8.33],[14,9.96],[6,7.24],[4,4.26],[12,10.84],[7,4.82],[5,5.68]];
 
    svg.selectAll("xline")
        .data(x.ticks(20))
        .enter().append("line")
        .attr("x1", x)
        .attr("x2", x)
        .attr("y1", 0)
        .attr("y2", height)
        .style("stroke", "#ccc");
 
    svg.selectAll("yline")
       .data(y.ticks(20))
       .enter().append("line")
       .attr("y1", y)
       .attr("y2", y)
       .attr("x1", 0)
       .attr("x2", width)
       .style("stroke", "#ccc");
 
    svg.selectAll("circle")
       .data(datos)
       .enter()
       .append("circle")
       .style("stroke", "red")
       .style("fill", "orange")
       .attr("r", 5)
       .attr("cx", function(d) { return x(d[0]); } )
       .attr("cy", function(d) { return y(d[1]); } );
 
    d3.select("button#i")
      .on("click", function() {
 
        var datos = [[10,8.04],[8,6.95],[13,7.58],[9,8.81],[11,8.33],[14,9.96],[6,7.24],[4,4.26],[12,10.84],[7,4.82],[5,5.68]];
 
    	svg.selectAll("circle")
    	   .data(datos)
           .transition()
           .attr("cx", function(d) { return x(d[0]); } )
           .attr("cy", function(d) { return y(d[1]); } );
      });
 
    d3.select("button#ii")
      .on("click", function() {
 
        var datos = [[10,9.14],[8,8.14],[13,8.74],[9,8.77],[11,9.26],[14,8.1],[6,6.13],[4,3.1],[12,9.13],[7,7.26],[5,4.74]];
 
    	svg.selectAll("circle")
    	   .data(datos)
    	   .transition()
           .attr("cx", function(d) { return x(d[0]); } )
           .attr("cy", function(d) { return y(d[1]); } );
    });
 
    d3.select("button#iii")
      .on("click", function() {
 
        var datos = [[10,7.46],[8,6.77],[13,12.74],[9,7.11],[11,7.81],[14,8.84],[6,6.08],[4,5.39],[12,8.15],[7,6.42],[5,5.73]];
 
    	svg.selectAll("circle")
    	   .data(datos)
    	   .transition()
           .attr("cx", function(d) { return x(d[0]); } )
           .attr("cy", function(d) { return y(d[1]); } );
    });
 
    d3.select("button#iv")
      .on("click", function() {
 
        var datos = [[8,6.58],[8,5.76],[8,7.71],[8,8.84],[8,8.47],[8,7.04],[8,5.25],[19,12.5],[8,5.56],[8,7.91],[8,6.89]];
 
    	svg.selectAll("circle")
    	   .data(datos)
    	   .transition()
           .attr("cx", function(d) { return x(d[0]); } )
           .attr("cy", function(d) { return y(d[1]); } );
    });
      
    </script>
 
</body>
</html>

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