D3 Examples - Anscombe's Quartet (Transitions)

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style type="text/css">
​
  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>
​
<body>
  <div class="info"></div>
​
  <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>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
​
<script type="text/javascript">
  
var margin = {top: 20, right: 50, bottom: 20, left: 10};
​
//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>
    