D3 Examples - Blocks Example of Anscombe's Quartet

xxxxxxxxxx
 
<!DOCTYPE html>
 <meta charset="utf-8">
​
 <style type="text/css">
   /*css to go here*/
   .axis path {
        fill: none;
        stroke: none;
   }
   .axis line {
        stroke: #aaa;
        stroke-dasharray: 2;    
   } 
   .axis text {
        font: 12px sans-serif;
        color: #aaaaaa;
   }  
   .anscombe-circles {
     fill: purple;
   }
   .anscombe-circle-group text {
     font: 8px sans-serif;
   }
    .anscombe-circles {
        color: purple;
        opacity: 0.5;
   }
​
 </style>
​
 <body></body>
​
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
​
 <script>
   //JS to go here
   var data = [
    {'group':'III', 'x': 10, 'y': 7.46},
    {'group':'III', 'x': 8  , 'y': 6.77},
    {'group':'III', 'x': 13, 'y':   12.74},
    {'group':'III', 'x': 9  , 'y': 7.11},
    {'group':'III', 'x': 11, 'y':   7.81},
    {'group':'III', 'x': 14, 'y':   8.84},
    {'group':'III', 'x': 6  , 'y': 6.08},
    {'group':'III', 'x': 4  , 'y': 5.39},
    {'group':'III', 'x': 12, 'y':   8.15},
    {'group':'III', 'x': 7  , 'y': 6.42},
    {'group':'III', 'x': 5  , 'y': 5.73},
    ];
​
    var margin = {top: 50, right: 50, bottom: 50, left: 50};
​
    var width = 500 - margin.left - margin.right,
        height = 500 - 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()
        .domain([0,15])
        .range([0,width])
​
    var yScale = d3.scale.linear()
        .domain([0,15])
        .range([height, 0]) 
​
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .ticks(15)
        .tickSize(-height)
        // making the ticks and number display below the axis
        .orient("bottom")
​
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .ticks(15)
        .tickSize(-width)
        // making the ticks and number display to the left of the axis
        .orient("left") 
​
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform","translate(0, " + height + ")")
        .call(xAxis)
​
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
​
    // var circles = svg.selectAll(".anscombe-circles")
    //  .data(data)
    //  .enter().append("circle")
    //  .attr("class","anscombe-circles")
    //  .attr("cx", function(d) {return xScale(d.x) })
    //  .attr("cy", function(d) {return yScale(d.y) })
    //  .attr("r", 5);
​
​
    var circleGroups = svg.selectAll(".anscombe-circle-group")
        .data(data)
        .enter().append("g")
        .attr("class","anscombe-circle-group")
        .attr("transform", function (d) { return "translate(" + xScale(d.x) +"," +yScale(d.y) +")" })
​
    circleGroups.append("text")
        .attr("class", function(d,i) { return i })
        .attr("dx", 5)
        .attr("dy", 5)
        .text(function(d) { return d.x + "," + d.y; })  
​
    circleGroups.append("circle")
        .attr("class", function(d,i) { return "anscombe-circles T" + i; })
        .attr("r", 5)   
        .on("mouseover", function() {
            var myClass = d3.select(this).attr("class").split(" ")[1];
            d3.selectAll("." + myClass)
            .style("fill", "#fff")
        })
        .on("mouseleave", function() {
            d3.selectAll("text")
            .style
        })
​
    svg.append("line")
        .attr("x1", 0)
        .attr("x2", width)
        .attr("y1", height)
        .attr("y2", height)             
        .style("stroke", "#000")
​
 </script>
    