aaizemberg/index.html

## index.html
<!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="http://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>
	<!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ón entre cada una de las variables x e y</td>
	<td>0.82</td>
	</tr>
	<tr>
	<td>Recta de regresión</td>
	<td>y = 3 + 0.5 x</td>
	</tr>
	</table>

	<p><a href="http://es.wikipedia.org/wiki/Cuarteto_de_Anscombe">mas informació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>