xxxxxxxxxx<meta charset="utf-8"><style type="text/css"> /*css goes here*/ .header{ text-align: center; font-weight: bold; border-bottom: thin solid black; margin-left: 100px; margin-right: 100px; } svg{ border: 1px solid #f0f; } circle{ fill:blue; } text{ font-family: arial; font-size: 10px; fill:gray; }</style><body> <!-- html goes here --> <h1 class="header">Anscombe's Quartet</h1></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 parts = ["This is", "my first", "data join!"]; // var sentence = d3.select("body") // .selectAll("p") // .data(parts) // .enter() // .append("p") // .text(function(d) { return d; }); var width = 720; var height = 400; var data = [{"x":10,"y":8.04},{"x":8,"y":6.95},{"x":13,"y":7.58},{"x":9,"y":8.81},{"x":11,"y":8.33},{"x":14,"y":9.96},{"x":6,"y":7.24},{"x":4,"y":4.26},{"x":12,"y":10.84},{"x":7,"y":4.82},{"x":5,"y":5.68}]; var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); var scaleX = d3.scale.linear() .range([0, width]) .domain([2,20]); //.domain([d3.min(data.x),d3.max(data.x)]); var scaleY = d3.scale.linear() .range([height,0]) .domain([0,15]); //.domain([d3.min(data.y),d3.max(data.y)]); var circleGroup = svg.selectAll("g") .data(data) .enter() .append("g") .attr("class","circle-group") .attr("transform",function(d){return"translate("+scaleX(d.x)+","+scaleY(d.y)+")";}); circleGroup.append("circle") // .attr("cx",function(d){return scaleX(d.x);}) // .attr("cy",function(d){return scaleY(d.y);}) .attr("r",5) .attr("class","anscombe-circle"); circleGroup.append("text") // .attr("x",function(d){return scaleX(d.x)-20;}) // .attr("y",function(d){return scaleY(d.y)-7;}) .text(function(d){return "("+d.x+" , "+d.y+")";});</script> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js