All examples By author By category About

mph006

Full window Github gist

Anscombe's Quartet (Transitions)

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

body {
    font-family: arial, sans;
    font-size: 13px;
    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-right: 10px;
  }

table {
    width: 200px;
    margin: 100px 25px;
    border-collapse: collapse;
    display: inline-block;

}

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

td {
    padding: 10px 5px;
    font-size: 18px;
    border-bottom: 1px solid #dedede;
  }

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

</style>

<div class="legend">
  <text>Data Set</text>
    <div class="typeToggle">
      <input id ="0" type="radio" class ="I" name="circle-update" checked onclick="checkAddress(this)">Quartet: I
    </div>
    <div class="typeToggle">
      <input id ="1" type="radio" class="II" name="circle-update" onclick="checkAddress(this)">Quartet: II
    </div>
    <div class="typeToggle">
      <input id ="2" type="radio" class = "III" name="circle-update" onclick="checkAddress(this)">Quartet: III
    </div>
    <div class="typeToggle">
      <input id ="3" type="radio" class = "IV" name="circle-update" onclick="checkAddress(this)">Quartet: IV
    </div>

</div>

</body>

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

var width = 900 - margin.left - margin.right,
    height = 600  - 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 checkAddress(element){

d3.selectAll(".circle-group")
      .data(nest[+element.id].values)
      .transition().duration(1000)
      .attr("transform",function(d){return"translate("+xScale(d.x)+","+yScale(d.y)+")";});

d3.selectAll(".g-x")
      .transition().duration(500)
      .style("opacity",0);

d3.selectAll(".g-y")
      .transition().duration(500)
      .style("opacity",0);

d3.selectAll(".circle-text")
      .data(nest[+element.id].values)
      .text(function(d){return "("+d.x+" , "+d.y+")";});

d3.select(".quartet-label")
      .transition().duration(500)
      .style("opacity",0);

setTimeout(function(){

d3.selectAll(".g-x")
              .data(nest[+element.id].values)
              .text(function(d) { return d.x;})
              .transition().duration(500).style("opacity",1);

d3.selectAll(".g-y")
          .data(nest[+element.id].values)
          .text(function(d){ return d.y;})
          .transition().duration(500).style("opacity",1);

d3.select(".quartet-label")
          .text("Quartet: "+element.className)
          .transition().duration(500).style("opacity",1);

},500);
  }

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);
    });

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

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

localXVals =[];
  localYVals =[];

nest[0].values.forEach(function(d){
    localXVals.push(d.x);
    localYVals.push(d.y);
  });

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

container.append("h2")
      .attr("class","quartet-label")
      .text("Quartet: "+nest[0].key);

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

var svg = container.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(nest[0].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;})
        .attr("class","circle-text")
        .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",175);

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

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

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

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

var row = table.selectAll(".g-row")
    .data(nest[0].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;});

}

</script>

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