huembelin/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<style type="text/css">

body {
	font: 16px sans-serif;
}

.circle-label {
	font: 18px sans-serif;
	opacity: 0;
}

.circle {
	fill: #3F6E82;
}

.x path {

}


.axis line {
	stroke: #d3d3d3;
}


</style>
<body></body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<h1 align=center> Anscombe's Quartet Scatterplot </h1>
<h3 align=center> Group II </h1>


<script>


/// Loading data and defining Chart (scatterplot)

d3.tsv("quartet.tsv", ready)

function ready(error, data) {
	if (error) return console.warn(error);

	data.forEach(function(row) {

		row.x = +row.x;
		row.y = +row.y;
	})
	console.log(data);

	var groupTwoData = data.filter(function(d) {return d.group == 'II' })

	var xScale = d3.scaleLinear()
		.domain([2, d3.max(groupTwoData, function(d) {return d.x})+1.1]).nice()
		.range([0,width])

	var yScale = d3.scaleLinear()
		.domain([0, d3.max(groupTwoData, function(d) {return d.y})+1]).nice()
		.range([height,0])

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

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

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

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

 	d3.select(".x")
 		.selectAll(".tick")
 		.filter(function(d) {return d == 0})
 		.select("text")
 		.remove()


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

    circleGroup.append("circle")
          .attr("r", 10)
          .attr("class","circle")

    circleGroup.append("text")
    	.attr("class","circle-label")
    	.attr("dy",-25)
    	.attr("dx",-13)
        .text(function(d) { return Math.round(d.x,1) + "," + Math.round(d.y,1) })


/// Mouse-over effect

circleGroup.on("mouseenter", function() {
	d3.select(this)
	 	.transition()
		  .ease(d3.easeElastic)
		  .duration(2000)
	 	.select("circle")
	 		.attr("r",20)

	d3.select(this)
	 	.transition()
		  .ease(d3.easeElastic)
		  .duration(2000)
	 	.select("text")
	 		.style("opacity",1)
	 		.style("fill", "#FFBB36")

})


circleGroup.on("mouseleave", function() {

	d3.select(this)
	 	.transition()
		  .ease(d3.easeElastic)
		  .duration(2000)
	 	.select("text")
	 	.style("opacity",0)

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


/// Canvas

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

var width = 960 - margin.left - margin.right,
    height = 500 - 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 + ")");

</script>

## quartet.tsv

          
            group
            x
            y

            
              I
              10
              8.04

            
              I
              8
              6.95

            
              I
              13
              7.58

            
              I
              9
              8.81

            
              I
              11
              8.33

            
              I
              14
              9.96

            
              I
              6
              7.24

            
              I
              4
              4.26

            
              I
              12
              10.84

            
              I
              7
              4.82

            
              I
              5
              5.68

            
              II
              10
              9.14

            
              II
              8
              8.14

            
              II
              13
              8.74

            
              II
              9
              8.77

            
              II
              11
              9.26

            
              II
              14
              8.1

            
              II
              6
              6.13

            
              II
              4
              3.1

            
              II
              12
              9.13

            
              II
              7
              7.26

            
              II
              5
              4.74

            
              III
              10
              7.46

            
              III
              8
              6.77

            
              III
              13
              12.74

            
              III
              9
              7.11

            
              III
              11
              7.81

            
              III
              14
              8.84

            
              III
              6
              6.08

            
              III
              4
              5.39

            
              III
              12
              8.15

            
              III
              7
              6.42

            
              III
              5
              5.73

            
              IV
              8
              6.58

            
              IV
              8
              5.76

            
              IV
              8
              7.71

            
              IV
              8
              8.84

            
              IV
              8
              8.47

            
              IV
              8
              7.04

            
              IV
              8
              5.25

            
              IV
              19
              12.5

            
              IV
              8
              5.56

            
              IV
              8
              7.91

            
              IV
              8
              6.89
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style type="text/css">

	body {
	font: 16px sans-serif;
	}

	.circle-label {
	font: 18px sans-serif;
	opacity: 0;
	}

	.circle {
	fill: #3F6E82;
	}

	.x path {

	}


	.axis line {
	stroke: #d3d3d3;
	}


	</style>
	<body></body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<h1 align=center> Anscombe's Quartet Scatterplot </h1>
	<h3 align=center> Group II </h1>


	<script>


	/// Loading data and defining Chart (scatterplot)

	d3.tsv("quartet.tsv", ready)

	function ready(error, data) {
	if (error) return console.warn(error);

	data.forEach(function(row) {

	row.x = +row.x;
	row.y = +row.y;
	})
	console.log(data);

	var groupTwoData = data.filter(function(d) {return d.group == 'II' })

	var xScale = d3.scaleLinear()
	.domain([2, d3.max(groupTwoData, function(d) {return d.x})+1.1]).nice()
	.range([0,width])

	var yScale = d3.scaleLinear()
	.domain([0, d3.max(groupTwoData, function(d) {return d.y})+1]).nice()
	.range([height,0])

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

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

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

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

	d3.select(".x")
	.selectAll(".tick")
	.filter(function(d) {return d == 0})
	.select("text")
	.remove()


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

	circleGroup.append("circle")
	.attr("r", 10)
	.attr("class","circle")

	circleGroup.append("text")
	.attr("class","circle-label")
	.attr("dy",-25)
	.attr("dx",-13)
	.text(function(d) { return Math.round(d.x,1) + "," + Math.round(d.y,1) })


	/// Mouse-over effect

	circleGroup.on("mouseenter", function() {
	d3.select(this)
	.transition()
	.ease(d3.easeElastic)
	.duration(2000)
	.select("circle")
	.attr("r",20)

	d3.select(this)
	.transition()
	.ease(d3.easeElastic)
	.duration(2000)
	.select("text")
	.style("opacity",1)
	.style("fill", "#FFBB36")

	})


	circleGroup.on("mouseleave", function() {

	d3.select(this)
	.transition()
	.ease(d3.easeElastic)
	.duration(2000)
	.select("text")
	.style("opacity",0)

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


	/// Canvas

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

	var width = 960 - margin.left - margin.right,
	height = 500 - 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 + ")");

	</script>
group	x	y
I	10	8.04
I	8	6.95
I	13	7.58
I	9	8.81
I	11	8.33
I	14	9.96
I	6	7.24
I	4	4.26
I	12	10.84
I	7	4.82
I	5	5.68
II	10	9.14
II	8	8.14
II	13	8.74
II	9	8.77
II	11	9.26
II	14	8.1
II	6	6.13
II	4	3.1
II	12	9.13
II	7	7.26
II	5	4.74
III	10	7.46
III	8	6.77
III	13	12.74
III	9	7.11
III	11	7.81
III	14	8.84
III	6	6.08
III	4	5.39
III	12	8.15
III	7	6.42
III	5	5.73
IV	8	6.58
IV	8	5.76
IV	8	7.71
IV	8	8.84
IV	8	8.47
IV	8	7.04
IV	8	5.25
IV	19	12.5
IV	8	5.56
IV	8	7.91
IV	8	6.89