Anscombe's Quartet + D3.js

Anscombe's Quartet

D3.js visualization of Anscombe's Quartet. Each dataset in the quartet is graphed separately along with its linear best fit. While all datasets have the same summary statistics (mean, variance, correlation, linear fit), their structures differ markedly.

Anscombe used the quartet in his seminal paper "Graphs in Statistical Analysis" to emphasize the importance of data visualization for exploratory data analysis. Such visualization exploration enables the analyst to make more informed analytical decisions and conclusions.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<link href='https://fonts.googleapis.com/css?family=Cabin:500' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="reset.css">
		<link rel="stylesheet" type="text/css" href="style.css">
		
		<script type="text/javascript" src="d3.min.js"></script>
		
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<h1>Anscombe's Quartet</h1>

// Update settings:
			scatter.xDomain( [3.5, 19] )
				.yDomain( [2, 12.5] )
				.yTicks( 5 );

// Load the JSON data:
			d3.json( 'data.json', function( data ) {

var figure, width;

// For each dataset in 'data', create a figure and graph the dataset along with its linear fit:
				for (var i = 0; i < data.length; i++) {

// Append a new figure to the DOM:
					figure = d3.select( 'body' )
						.append( 'figure' );

// Get the figure width:
					width = parseInt( figure.style( 'width' ), 10 );

// Update the chart generator settings:
					scatter.width( width )
						.xLabel( 'x' + (i+1) )
						.yLabel( 'y' + (i+1) );

// Append the data and generate a new chart:
					figure.datum( data[i] )
						.attr('class', 'chart')
						.call( scatter );

// Compute the linear fit:
					scatter.linearFit();

}; // end FOR i

});
		</script>
	</body>
</html>