All examples By author By category About

mph006

Full window Github gist

Anscombe's Quartet Visualized

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

body {
    font-family: arial, sans;
    font-size: 11px;
    margin: 10px auto;
    width:1220px;
  }
  
  svg {
/*    border: 1px solid #f0f;*/
  }

h4{
    text-align: center;
    font-weight: normal;
  }

.axis text {
    font-size: 12px;
    fill: #777;
  }

.axis path {
    display: none;
  }

.axis line {
    stroke-width:.3px;
    stroke: #dedede;
    /*stroke-dasharray: 2px 2px;*/
  }

.quartet-container {
    display: inline-block;
    margin-right:10px;
  }

.variety-line {
/*    stroke: steelblue;*/
    stroke-width: 2.5px;
    fill: none;
    cursor: pointer;
/*    stroke: #d0d0d0;*/
  }

.info{
    position: absolute;
    top: 10px;
    left: 250px;
  }

.legend{
    position: absolute;
    left: 1250px;
    top: 100px;
    /*  min-height: 200px;
    min-width: 200px;*/
    border: thin solid black;
  }

.legend text{
    position: relative;
    text-align: center;
    display: block;
    border-bottom: thin solid black;
    padding: 10px 30px 10px 30px;
  }

.typeToggle{
    text-align: center;
    padding-top: 7px;
  }

table {
    width: 120px;
    margin: 10px 10px;
    border-collapse: collapse;
    position: absolute;
  }

.g-num {
    text-align: center;
  }

td {
    padding: 3px 0;
    border-bottom: 1px solid #dedede;
  }

th {
    text-align: center;
    padding-bottom: 10px;
  }

</style>

</div>

</body>

//For nice x axis formatting
var xOffset = 0;
var xVals = [];
var yVals = [];

var width = 290 - margin.left - margin.right,
    height = 350 - 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)
    .tickSize(-height)
    .tickPadding(8)
    .tickFormat(d3.round)
    .orient("bottom");

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

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

function fetchInt(string){
    return +string.replace(",","");
  }

function mouseover(){
    var gElement = d3.select(this)[0][0];
    var circle = gElement.children[1];
    var text = gElement.children[0];

d3.select(text).transition().duration(200).style("opacity",1);
    d3.select(circle).transition().duration(200).style("fill","red");

}

function mouseleave(){
    var gElement = d3.select(this)[0][0];
    var circle = gElement.children[1];
    var text = gElement.children[0];

d3.select(text).transition().duration(200).style("opacity",0);
    d3.select(circle).transition().duration(200).style("fill","steelblue");
  }

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

//here will go formatting.
  data.forEach(function(d){
    d.x = +d.x;
    d.y = parseFloat(d.y);    
  });

data.forEach(function(d){
      xVals.push(d.x);
      yVals.push(d.y);
    });

var nest = d3.nest()
                .key(function(d){ return d.group;})
                .sortValues(function(a,b) {return a.x -b.x;})
                .entries(data);

function makeComparisonChart(quartetInfo) {

//do all the stuff
    var line = d3.svg.line()
    .x(function(d) { return xScale(d.values[0].year)+xOffset; })
    .y(function(d) { return yScale(d.values[0].yield); });

yScale.domain([0,d3.max(yVals)]);
    xScale.domain([0,d3.max(xVals)]);

localXVals =[];
    localYVals =[];

quartetInfo.values.forEach(function(d){
      localXVals.push(d.x);
      localYVals.push(d.y);
    });

var smallMultiple = d3.select("body")
        .append("div")
        .attr("class", "quartet-container");

smallMultiple.append("h2")
        .text("Quartet: "+quartetInfo.key);

smallMultiple.append("h4")
        .text("Average X: "+d3.mean(localXVals)+" Average Y: "+d3.mean(localYVals).toFixed(3));

var svg = smallMultiple.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 circles = svg.selectAll("g")
                    .data(quartetInfo.values)
                    .enter()
                    .append("g")
                    .attr("class","circle-group")
                    .attr("transform",function(d){return"translate("+xScale(d.x)+","+yScale(d.y)+")";})
                    .style("fill","steelblue")
                    .on("mouseover",mouseover)
                    .on("mouseleave",mouseleave);

circles.append("text")
          .attr("x",function(d){return 10;})
          .attr("y",function(d){return 2;})
          .text(function(d){return "("+d.x+" , "+d.y+")";})
          .style("fill","black")
          .style("opacity",0);

circles.append("circle")
          .attr("r",5)
          .attr("class","anscombe-circle");

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

svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate("  +10+ ",0)")
        .call(yAxis);

var table = d3.select("body").append("table")
                  .style("left",function(d){
                    switch(quartetInfo.key){
                      case "I":
                        return 175+"px";
                      case "II":
                        return 475+"px";
                      case "III":
                        return 775+"px";
                      case "IV":
                        return 1075+"px";
                      default:
                        return -1;
                    }
                   });

var header = table.append("tr");

header.append("th")
      .text("x");

header.append("th")
      .text("y");

var row = table.selectAll(".g-row")
    .data(quartetInfo.values)
    .enter().append("tr")
    .attr("class", "g-row");

// var row = table.selectAll("tr")
    //   .data(quartetInfo.values)
    //   .enter().append("tr")
    //   .attr("class", "g-row");

row.append("td")
      .attr("class", "g-x g-num")
      .text(function(d) { return d.x;});

row.append("td")
      .attr("class", "g-y g-num")
      .text(function(d){ return d.y;});

}

nest.forEach(function(d){
    makeComparisonChart(d);
  });

}

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js