Skip to content

Instantly share code, notes, and snippets.

@aaizemberg
Last active April 6, 2020 18:52
Show Gist options
  • Save aaizemberg/8245718 to your computer and use it in GitHub Desktop.
Save aaizemberg/8245718 to your computer and use it in GitHub Desktop.
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="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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment