emschuch/README.md

## README.md

      
    Raw
  

              README.md
            
          
    An interactive version of Anscombe's Quartet.

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

<style type="text/css">

    body {
        font-family: 'arial', sans-serif;
        font-size: 14px;
        max-width: 600px;
        margin: 20px auto;
    }

/*    svg {
        border:1px solid #f0f;
    }*/

    table {
        border-collapse: collapse;
        margin: 0 20px;
    }

    td {
        border-bottom: 1px solid #f0f;
        text-align: right;
        padding: 8px;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: #dedede;
    }

    .axis text {
        font-family: sans-serif;
        font-size: 12px;
        fill: #999;
    }

    .circle {
        fill: #f0f;
    }

</style>

<body>
    <h2>Anscombe's Quartet</h2>
    <div class='mega-container'></div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

<script>

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

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

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

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

    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient('bottom')
        .tickSize(-height)
        .tickPadding(8);

    var yAxis = d3.svg.axis()
        .scale(yScale)
        .tickSize(-width)
        .tickPadding(8)
        .orient('left');


    d3.tsv('quartet.tsv', ready);

    function ready(err, data) {

        data.forEach(function (d) {
            d.x = +d.x;
            d.y = +d.y
        });


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

        xScale.domain([0, d3.max(initialGroup, function (d) {
                return d.x + 1;
            })
        ]);

        yScale.domain([0, d3.max(initialGroup, function (d) {
            return d.y + 1;
            })
        ]);

        var buttons = d3.select('.mega-container')
            .selectAll('button')
            .data(['I', 'II', 'III', 'IV'])
          .enter().append('button')
            .text(function (d) {
                return 'Group ' + d;
            })
            .on('click', function (d) {
                updateChart(d);
            });

        var chartcontainer = d3.select('.mega-container')
            .append('div')
            .attr('class', 'g-chart-container');

        var chartgroup = chartcontainer
            .append('h5')
            .attr('class', 'g-group');

        var chart = chartcontainer
            .append('div')
            .attr('class', 'g-chart');

        var svg = chart.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 xAxisGroup = svg.append('g')
            .attr('class', 'axis')
            .attr('transform', 'translate(0,' + height + ')')
            .call(xAxis);

        var yAxisGroup = svg.append('g')
            .attr('class', 'axis')
            .call(yAxis);


        var circleGroup = svg.selectAll(".anscombe-circle-group")
            .data(initialGroup)
          .enter()
            .append("g")
            .attr("class", "anscombe-circle-group")
            .attr('transform', function (d) {
                return 'translate(' + xScale(d.x) + ',' + yScale(d.y) + ')';
            });

        circleGroup.append("circle")
            .attr('class', 'circle')
            .attr("r", 5);

        var labels = circleGroup.append("text")
            .attr('class', 'labels')
            .text(function (d) { return "(" + d.x + "," + d.y + ")"; })
            .attr("dx", 6);


        function updateChart (groupId) {

            var groupData = data.filter(function (d) {
                return d.group === groupId;
            });

            xScale.domain([0, d3.max(groupData, function (d) {
                    return d.x + 1;
                })
            ]);

            yScale.domain([0, d3.max(groupData, function (d) {
                return d.y + 1;
                })
            ]);

            xAxisGroup
                .transition().duration(1000)
                .call(xAxis);

            yAxisGroup
                .transition().duration(1000)
                .call(yAxis);

            circleGroup
                .data(groupData)
                .transition().duration(1000)
                .attr('transform', function (d) {
                    return 'translate(' + xScale(d.x) + ',' + yScale(d.y) + ')';
                });

            circleGroup.select('text')
                .text(function (d) { return "(" + d.x + "," + d.y + ")"; });


        }

    }


</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-family: 'arial', sans-serif;
	font-size: 14px;
	max-width: 600px;
	margin: 20px auto;
	}

	/* svg {
	border:1px solid #f0f;
	}*/

	table {
	border-collapse: collapse;
	margin: 0 20px;
	}

	td {
	border-bottom: 1px solid #f0f;
	text-align: right;
	padding: 8px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #dedede;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 12px;
	fill: #999;
	}

	.circle {
	fill: #f0f;
	}

	</style>

	<body>
	<h2>Anscombe's Quartet</h2>
	<div class='mega-container'></div>
	</body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

	<script>

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

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

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

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

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient('bottom')
	.tickSize(-height)
	.tickPadding(8);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.tickSize(-width)
	.tickPadding(8)
	.orient('left');


	d3.tsv('quartet.tsv', ready);

	function ready(err, data) {

	data.forEach(function (d) {
	d.x = +d.x;
	d.y = +d.y
	});


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

	xScale.domain([0, d3.max(initialGroup, function (d) {
	return d.x + 1;
	})
	]);

	yScale.domain([0, d3.max(initialGroup, function (d) {
	return d.y + 1;
	})
	]);

	var buttons = d3.select('.mega-container')
	.selectAll('button')
	.data(['I', 'II', 'III', 'IV'])
	.enter().append('button')
	.text(function (d) {
	return 'Group ' + d;
	})
	.on('click', function (d) {
	updateChart(d);
	});

	var chartcontainer = d3.select('.mega-container')
	.append('div')
	.attr('class', 'g-chart-container');

	var chartgroup = chartcontainer
	.append('h5')
	.attr('class', 'g-group');

	var chart = chartcontainer
	.append('div')
	.attr('class', 'g-chart');

	var svg = chart.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 xAxisGroup = svg.append('g')
	.attr('class', 'axis')
	.attr('transform', 'translate(0,' + height + ')')
	.call(xAxis);

	var yAxisGroup = svg.append('g')
	.attr('class', 'axis')
	.call(yAxis);


	var circleGroup = svg.selectAll(".anscombe-circle-group")
	.data(initialGroup)
	.enter()
	.append("g")
	.attr("class", "anscombe-circle-group")
	.attr('transform', function (d) {
	return 'translate(' + xScale(d.x) + ',' + yScale(d.y) + ')';
	});

	circleGroup.append("circle")
	.attr('class', 'circle')
	.attr("r", 5);

	var labels = circleGroup.append("text")
	.attr('class', 'labels')
	.text(function (d) { return "(" + d.x + "," + d.y + ")"; })
	.attr("dx", 6);


	function updateChart (groupId) {

	var groupData = data.filter(function (d) {
	return d.group === groupId;
	});

	xScale.domain([0, d3.max(groupData, function (d) {
	return d.x + 1;
	})
	]);

	yScale.domain([0, d3.max(groupData, function (d) {
	return d.y + 1;
	})
	]);

	xAxisGroup
	.transition().duration(1000)
	.call(xAxis);

	yAxisGroup
	.transition().duration(1000)
	.call(yAxis);

	circleGroup
	.data(groupData)
	.transition().duration(1000)
	.attr('transform', function (d) {
	return 'translate(' + xScale(d.x) + ',' + yScale(d.y) + ')';
	});

	circleGroup.select('text')
	.text(function (d) { return "(" + d.x + "," + d.y + ")"; });


	}

	}


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