D3 Examples - Anscombe's Quartet

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
body {
  font-family: arial, sans;
}
svg {
  border: 1px solid #d0d0d0;
}
.axis text {
  font-size: 12px;
  fill: #777;
}
.axis path {
  display: none;
}
.axis line {
  stroke-width:1px;
  stroke: #ccc;
  stroke-dasharray: 2px 2px;
}
circle {
  opacity: 0.6;
}
​
.buttons {
    float: left;
    clear: both;
    margin: 5px 0 10px 0;
    display: block;
    width: 100%;
}
.buttons div {
    float: left;
    margin-right: 10px;
    
    
}
</style>
<body>
​
<h1>Transitions and Updates Exercise</h1>
<p>Press buttons to transition the plot</p>
​
<div class="buttons">
​
<div id="option">
    <input name="updateButton" 
           type="button" 
           value="Update 1" 
           onclick="dance('I')" />
</div>
<div id="option">
    <input name="updateButton" 
           type="button" 
           value="Update 2" 
           onclick="dance('II')" />
</div>
<div id="option">
    <input name="updateButton" 
           type="button" 
           value="Update 3" 
           onclick="dance('III')" />
</div>
<div id="option">
    <input name="updateButton" 
           type="button" 
           value="Update 4" 
           onclick="dance('IV')" />
</div>
​
</div>
​
</body>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js" charset="utf-8"></script>
​
​
<script>
var margin = { top: 20, right: 10, bottom: 30, left: 30 };
var width = 500 - margin.left - margin.right;
var height = 400 - 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("transform", "translate(" + margin.left + "," + margin.top + ")");
​
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)
  .ticks(20);
​
var yAxis = d3.svg.axis()
  .scale(yscale)
  .orient("left")
  .tickSize(-width);
​
var color = d3.scale.category10();
​
d3.tsv("quartet.tsv", function(error, data) {
console.log(data);
// data pre-processing
  data.forEach(function(d,i) {
    d.x = +d.x;
    d.y = +d.y;
    d.id = i;
  });
  
  xscale.domain(d3.extent(data, function(d) {
    return d.x;
  }))
  
  yscale.domain(d3.extent(data, function(d) {
    return d.y;
  }))
  
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .attr("class", "x axis")
    .call(xAxis);
    
  svg.append("g")
    .attr("transform", "translate(0,0)")
    .attr("class", "y axis")
    .call(yAxis);
  
  var group = svg.selectAll("circle")
    .data(data, function(d) { return d.id; })
    .enter().append("circle")
    .attr("class", "anscombe-group")
    .attr("r", 5)
    .style("fill", function(d,i) { return color(d.group); })
    .attr("cx", function(d) { return xscale(d.x); })
    .attr("cy", function(d) { return yscale(d.y); });
 
  svg.append("text")
    .attr("x", 20)
    .attr("y", 30)
    .style("font", "20px sans-serif")
    .text("Anscombe's Quartet");
 
  window.dance = function(id) {
      
    var subset = data.filter(function(d) {
      return d.group == id;
    });
​
    var subgroup = svg.selectAll("circle.anscombe-group")
      .data(subset, function(d) { return d.id; });
    
    // circles no longer part of the subset
    subgroup.exit()
      .transition()
      .duration(900)
      .style("opacity", 0)
      .remove();
    
    // enter group, new nodes added to the chart
    subgroup.enter().append("circle")
      .attr("class", "anscombe-group")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .attr("cx", 0)
      .attr("cy", function(d) { return yscale(d.y); })
      .style("opacity", 0);
    
    // update+enter group
    subgroup
      .transition()
      .delay(600)
      .duration(900)
      .style("fill", function(d) { return color(d.group); })
      .attr("cx", function(d) { return xscale(d.x); })
      .attr("cy", function(d) { return yscale(d.y); })
      .style("opacity", 1);
  };
  
});
</script>
​
    