Quartet Scatter Plot

<!DOCTYPE html>
<html>
<body>

body {
    font: 16px sans-serif;
}

.circle-label {
    font: 12px sans-serif;
    opacity: 0;
}

.y path {
    fill: #efefef;
}

.axis line {
    stroke: #bfbfbf;
}

/*.circle {
    fill: steelblue;
}*/

</style>

// Anscombe's Quartet Checklist
// 1. Axes - x and a y axis
// 2. Values - tick marks, labels
// 3. x scale and a y scale
// 4. min and max value, and a min and max value in pixels
// 5. and a line for that axes
// 6. gridlines
// 7. we need that dataset
// 8. we need to make circles representing that dataset
// 9. the circles location is based on the x and y value
// 10. a legend
// 11. Title
// 12. the trend line
// 13. Create our canvas, the SVG

// NEW STUFF
// 1. Load in the data from a flat file (local file) DONE
// 2. Use groups to create the circles and add text labels DONE
// 3. Styling to the chart
// 4. Iternation - hover over a circle and get more info
// IF WE HAVE TIME
// Transition between different datasets

// STYLES
// Font size
// colors - Blue colors
// round the numbers
// white gridlines
// gray background
// fix our margins

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

var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// This is where I add the canvas to our visualization
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 + ")");

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

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

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

console.log(data);

var groupTwoData = data.filter(function(d) { return d.group == 'II' })
                           .sort(function(a, b) { return a.x < b.x })

console.log(groupTwoData);

xScale = d3.scaleLinear()
        .domain([0, d3.max(groupTwoData, function(d) { return d.x })*1.1]).nice()
        .range([0, width])

yScale = d3.scaleLinear()
        .domain([0, d3.max(groupTwoData, function(d) { return d.y })]).nice()
        .range([height, 0])

var xAxis = d3.axisBottom(xScale)
        .tickSize(-height);

var yAxis = d3.axisLeft(yScale)
        .tickSize(-width);

svg.append("g")
       .attr("class", "y axis")
       .call(yAxis)

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

d3.select(".y")
      .select("text")
      .remove()

var circleGroup = svg.selectAll(".circleGroups")
        .data(groupTwoData)
      .enter().append("g")
          .attr("class", "circleGroups")
          .attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")" })

var colorScale = d3.scaleSequential(d3.interpolateCool)
        .domain(xScale.domain());

circleGroup.append("circle")
        .attr("class", "circle")
          .attr("r", 10)
          .style("fill", function(d) { return colorScale(d.x) })

circleGroup.append("text")
        .attr("class", "circle-label")
        // .attr("dy", 16)
        .style("text-anchor", function(d, i) {
            if(i < 6) {
                return "start"
            } else {
                return "end"
            }
        })
        .text(function(d) { return Math.round(d.x,1) + "," + Math.round(d.y,1) })

circleGroup.on("mouseenter", function() {

d3.select(this)
          .select("text")
          .style("opacity", 1)

d3.select(this)
          .transition()
          .ease(d3.easeElastic)
          .duration(3000)
          .select("circle")
          .attr("r", 20)
          .style("fill", "red")

}).on("mouseleave", function() {

d3.select(this)
          .select("text")
          .style("opacity", 0)

d3.select(this)
          .transition()
          .ease(d3.easeElastic)
          .duration(3000)
          .select("circle")
          .attr("r", 10)
            .style("fill", function(d) { return colorScale(d.x) })
    })
}

</script>

https://d3js.org/d3.v4.min.js