Scatterplot class 02

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

.axis path {
	   fill: none;
	   stroke: #fff;
	   stroke-width: 2;
	}

.axis line {
	   stroke: #ccc ;
	   stroke-width: 1;
	   stroke-dasharray: 2,2;
	   /*stroke-opacity: .25;*/
	}

.anscombe-circles {
	   fill: #ff0066;
	   fill-opacity: .75;
     -webkit-transition:  .5s ease;
      -moz-transition:  .5s ease;
      -o-transition:  .5s ease;
      transition:  .5s ease;
	}

.anscombe-circle-group text {
	  z-index: 999;
	  -webkit-transition:  .5s ease;
      	  -moz-transition:  .5s ease;
          -o-transition:  .5s ease;
          transition:  .5s ease;
	}

.axis text {
	   font: 12px sans-serif;
	}

.x.axis text {
		
	}

</style>
</head>
<body>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

var anscombeData = [
    {'group':'I', 'x': 10,  'y':  8.04},
    {'group':'I', 'x': 8,   'y':  6.95},
    {'group':'I', 'x': 13,  'y':  7.58},
    {'group':'I', 'x': 9,   'y':  8.81},
    {'group':'I', 'x': 11,  'y':  8.33},
    {'group':'I', 'x': 14,  'y':  9.96},
    {'group':'I', 'x': 6,   'y':  7.24},
    {'group':'I', 'x': 4,   'y':  4.26},
    {'group':'I', 'x': 12,  'y':  10.84},
    {'group':'I', 'x': 7,   'y':  4.82},
    {'group':'I', 'x': 5,   'y':  5.68}
];

console.log(anscombeData);

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

var width = 700 - margin.left - margin.right,
   height = 700 - 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,14])
   .range([0, width])

var yScale = d3.scale.linear()
   .domain([0,14])
   .range([height, 0])

var axisTextPadding = 20;

var xAxis = d3.svg.axis()
   .scale(xScale)
   .ticks(7)
   .tickSize(-height)
   .tickPadding(10)
   .orient("bottom");

var yAxis = d3.svg.axis()
   .scale(yScale)
   .ticks(7)
   .tickSize(-width)
   .tickPadding(10)
   .orient("left");

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

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

// var circles = svg.selectAll(".anscombe-circles")
//     .data(anscombeData)
//     .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", function(d,i) { return Math.random()*10; });

var circleGroups = svg.selectAll(".anscombe-circle-group")
   .data(anscombeData)
   .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 "T" + i })
   .attr("dx", -35)
   .attr("dy", -18)
   .text(function(d) { return "x: " + d.x + ", y: " + d.y; })
   .style("fill-opacity","0")
   .style("font","13px sans-serif")
   .style("font-weight","bold")

circleGroups.append("circle")
  .attr("class",function(d,i) { return "anscombe-circles T" + i; })
  .attr("r", 10)
  .on("mouseenter", function() { 
     var myClass = d3.select(this).attr("class").split(" ")[1];
     d3.selectAll("." + myClass)
       .style("fill-opacity","1")
     d3.select(this)
       .style("stroke-width","2")
       .style("stroke","#000")
  })
  .on("mouseleave", function() { 
       
       d3.selectAll(".anscombe-circle-group")
         .selectAll("text")
         .style("fill-opacity","0")

d3.selectAll(".anscombe-circles")
         .style("stroke-width","0")
         .style("fill-opacity","0.75")
  });

svg.append("line")
  .attr("x1", 0)
  .attr("x2", width + 10)
  .attr("y1", height)
  .attr("y2", height)
  .style("stroke","#333")

console.log("domain", xScale.domain())
console.log("range", xScale.range())

</script>

</html>

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