xxxxxxxxxx<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .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><!-- <script src="d3.v2.min.js"></script> --><script> //JS to go herevar 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