From 2bf78959c86a22dede09784f4181ec5bf32777bd Mon Sep 17 00:00:00 2001
From: yikth <netyth@gmail.com>
Date: Mon, 31 Aug 2020 13:48:30 +0800
Subject: [PATCH] apply xScale and yScale

---
 playground/scatterplot.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/playground/scatterplot.js b/playground/scatterplot.js
index c0e8e97..ed08986 100644
--- a/playground/scatterplot.js
+++ b/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");
\ No newline at end of file