apply xScale and yScale

playground/scatterplot.js

@@ -6,6 +6,14 @@ var dataset = [
 const WIDTH = 600
 const HEIGHT = 600
 
+var xScale = d3.scaleLinear()
+                .domain([0, d3.max(dataset, d => d[0])])
+                .range([0, WIDTH]);
+
+var yScale = d3.scaleLinear()
+                .domain([0, d3.max(dataset, d => d[1])])
+                .range([0, HEIGHT]);
+
 // Create SVG element
 var svg = d3.select("body")
     .append("svg")
@@ -17,8 +25,8 @@ svg.selectAll("circle")
 .data(dataset)
 .enter()
 .append("circle")
-.attr("cx", pt => pt[0])
-.attr("cy", pt => pt[1])
+.attr("cx", pt => xScale(pt[0]))
+.attr("cy", pt => yScale(pt[1]))
 .attr("r", 5);
 
 // create label for each point
@@ -27,8 +35,8 @@ svg.selectAll("text")
     .enter()
     .append("text")
     .text(pt => `${pt[0]},${pt[1]}`)
-    .attr("x", pt => pt[0])
-    .attr("y", pt => pt[1])
+    .attr("x", pt => xScale(pt[0]))
+    .attr("y", pt => yScale(pt[1]))
     .attr("font-family", "sans-serif")
     .attr("font-size", "11px")
     .attr("fill", "red");