Anscombe's Quartet

<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
body {
  font-family: arial, sans;
}
svg {
  border: 1px solid #d0d0d0;
}
.axis text {
  font-size: 12px;
  fill: #777;
}
.axis path {
  display: none;
}
.axis line {
  stroke-width:1px;
  stroke: #ccc;
  stroke-dasharray: 2px 2px;
}
circle {
  opacity: 0.6;
}

.buttons {
	float: left;
	clear: both;
	margin: 5px 0 10px 0;
	display: block;
	width: 100%;
}
.buttons div {
	float: left;
	margin-right: 10px;
	
	
}
</style>
<body>

<h1>Transitions and Updates Exercise</h1>
<p>Press buttons to transition the plot</p>

</div>

</body>

var xscale = d3.scale.linear()
  .range([0,width]);

var yscale = d3.scale.linear()
  .range([height,0]);

var xAxis = d3.svg.axis()
  .scale(xscale)
  .tickSize(-height)
  .ticks(20);

var yAxis = d3.svg.axis()
  .scale(yscale)
  .orient("left")
  .tickSize(-width);

var color = d3.scale.category10();

d3.tsv("quartet.tsv", function(error, data) {
console.log(data);
// data pre-processing
  data.forEach(function(d,i) {
    d.x = +d.x;
    d.y = +d.y;
    d.id = i;
  });
  
  xscale.domain(d3.extent(data, function(d) {
    return d.x;
  }))
  
  yscale.domain(d3.extent(data, function(d) {
    return d.y;
  }))
  
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .attr("class", "x axis")
    .call(xAxis);
	
  svg.append("g")
    .attr("transform", "translate(0,0)")
    .attr("class", "y axis")
    .call(yAxis);
  
  var group = svg.selectAll("circle")
    .data(data, function(d) { return d.id; })
    .enter().append("circle")
    .attr("class", "anscombe-group")
    .attr("r", 5)
    .style("fill", function(d,i) { return color(d.group); })
    .attr("cx", function(d) { return xscale(d.x); })
    .attr("cy", function(d) { return yscale(d.y); });
 
  svg.append("text")
    .attr("x", 20)
    .attr("y", 30)
    .style("font", "20px sans-serif")
    .text("Anscombe's Quartet");
 
  window.dance = function(id) {
	  
    var subset = data.filter(function(d) {
      return d.group == id;
    });

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js