molliemarie/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This viz allows you to button between each of the four datasets in Anscombe's quartet. Includes enlarged circles upon hover, a rainbow color scale for the circles, and delayed transitions between datasets.

  
## index.html

<!DOCTYPE html>
<html>
<body>
<div class="buttons"></div>
<br />
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>

.circleGroups text {
	font: 10px sans-serif;
}

.title {
	font: 20px sans-serif;
}

.axis .tick {
	stroke-width:1px;
	stroke-dasharray: 2px 2px;
	stroke-opacity: .5;
}

</style>

<script>

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

var width = 600 - margin.left - margin.right,
    height = 600 - 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("class", "innerG")
    .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)

function dataSwap(datasetGroup) {

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

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

	console.log(datasetGroup)

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

		d3.select('.title')
			.text('Group ' + datasetGroup);
}

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

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

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

	window.data = data;


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

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

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

	var colorScale = d3.scaleSequential(d3.interpolateRainbow)
		.domain([0, groupOneData.length - 1])

	groupOneData.filter(function(d) {return d.group})

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

	var radiusSize = 10

	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('opacity', 0.5)


			d3.select(this)
				.select('circle')
				.transition()
				.ease(d3.easeElastic)
				.attr('r', 20)
				.style('opacity', 1)
		})
		.on('mouseleave', function(d) {
			d3.select(this)
				.select('text')
				.transition()
				.style('opacity', 0)
				.remove()

			d3.select(this)
				.select('circle')
				.transition()
				.ease(d3.easeElastic)
				//
				.attr('r', radiusSize)

			d3.selectAll('circle')
				.style('opacity', 1)
		})

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

</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>
	<html>
	<body>
	<div class="buttons"></div>
	<br />
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>

	.circleGroups text {
	font: 10px sans-serif;
	}

	.title {
	font: 20px sans-serif;
	}

	.axis .tick {
	stroke-width:1px;
	stroke-dasharray: 2px 2px;
	stroke-opacity: .5;
	}

	</style>

	<script>

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

	var width = 600 - margin.left - margin.right,
	height = 600 - 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("class", "innerG")
	.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)

	function dataSwap(datasetGroup) {

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

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

	console.log(datasetGroup)

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

	d3.select('.title')
	.text('Group ' + datasetGroup);
	}

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

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

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

	window.data = data;


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

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

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

	var colorScale = d3.scaleSequential(d3.interpolateRainbow)
	.domain([0, groupOneData.length - 1])

	groupOneData.filter(function(d) {return d.group})

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

	var radiusSize = 10

	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('opacity', 0.5)


	d3.select(this)
	.select('circle')
	.transition()
	.ease(d3.easeElastic)
	.attr('r', 20)
	.style('opacity', 1)
	})
	.on('mouseleave', function(d) {
	d3.select(this)
	.select('text')
	.transition()
	.style('opacity', 0)
	.remove()

	d3.select(this)
	.select('circle')
	.transition()
	.ease(d3.easeElastic)
	//
	.attr('r', radiusSize)

	d3.selectAll('circle')
	.style('opacity', 1)
	})

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

	</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