Dynamic Anscombe's Scatter Plot

<!DOCTYPE html>
<html>
<body>
  <h1>Let's make an Anscombe's scatter plot</h1>
  <div class="buttons"></div>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
  body {
    font: 16px sans-serif;
  }

.circle-label {
    font: 12px sans-serif;
    opacity: 0;
  }
  .buttons {
    margin-bottom: 10px;
  }
  .title {
	   font: 20px sans-serif;
     margin-bottom: 10px;
  }
  .y path {
    fill: #efefef;
  }
  .axis line {
    stroke: #bfbfbf;
    stroke-dasharray: 1;
	  stroke-opacity: .5;
  }
  </style>

</body>
<script>

var margin = {top: 20, right: 10, bottom: 40, left: 40};

var width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xScale = d3.scaleLinear()
	.domain([0, 20])
	.range([0, width]);

var yScale = d3.scaleLinear()
	.domain([0, 20])
	.range([height, 0]);

var xAxis = d3.axisBottom(xScale)
	.tickSize(-height);

var yAxis = d3.axisLeft(yScale)
	.tickSize(-width);

svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)

svg.append("g")
	.attr("class", "x axis")
	.attr("transform","translate(0," + height + ")")
	.call(xAxis)

d3.select(".y")
	  .select("text")
	  .remove()

var colorScale = d3.scaleSequential(d3.interpolateRainbow);

function dataSwap(datasetGroup) {

eachDataGroup = data.filter(function(d) { return d.group == datasetGroup })

eachDataGroup.sort(function(a, b) { return a.x - b.x });

svg.selectAll(".circleGroups")
		.data(eachDataGroup)
		.transition()
		.delay(function(d, i) { return i*40; })
		.attr("transform",function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")" })

svg.selectAll(".circleGroups")
		.select("circle")
		.transition()
		.delay(function(d, i) { return i*40; })
		.style("fill", function(d, i) { return colorScale(i); })

d3.select(".title")
	  .text("Group " + datasetGroup)
}

d3.tsv("quartet.tsv", function(error, data) {

if (error) return console.warn(error);

window.data = data;
	var groups = d3.set(data.map(function(d) { return d.group })).values();

d3.select(".buttons")
	  .selectAll("button")
		.data(groups)
	  .enter().append("button")
		.text(function(d) { return "Group " + d; })
		.on("click", function(d) {

dataSwap(d);
		})

groupOneData = data.filter(function(d) { return d.group == "I" })

groupOneData.sort(function(a, b) { return a.x - b.x });

colorScale.domain([0, groupOneData.length-1])

svg.append("text")
	   .attr("class", "title")
	   .attr("dy", -5)
	   .text("Group " + groupOneData[0].group)

var circleGroups = svg.selectAll(".circleGroups")
		.data(groupOneData)
	  .enter().append("g")
	  .attr("class", "circleGroups")
		.attr("transform",function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")" })
		.on("mouseenter", function(d) {

d3.select(this)
				.append("text")
				.attr("dx", 5)
				.attr("dy", 10)
				.text("(" + d.x + "," + d.y + ")")

d3.selectAll("circle")
			  .style("fill-opacity", .5);

d3.select(this)
			  .select("circle")
			  .transition()
			  .ease(d3.easeElastic)
			  .attr("r", 20)
			  .style("fill-opacity", 1);
		})
		.on("mouseleave", function(d) {

d3.select(this)
			  .select("text")
			  .transition()
			  .style("opacity", 0)
			  .transition()
			  .remove();

d3.select(this)
			  .select("circle")
			  .transition()
			  .ease(d3.easeElastic)
			  .attr("r", 10)

d3.selectAll("circle")
			  .style("fill-opacity", 1);
		})

var radiusSize = 10;

circleGroups.append("circle")
		.attr("r", radiusSize)
		.style("fill", function(d, i) { return colorScale(i); })

})

</script>

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