From 196881d2f39f0e2bea912ebfd5a8c4fb7aa43cb5 Mon Sep 17 00:00:00 2001
From: yikth <netyth@gmail.com>
Date: Mon, 31 Aug 2020 16:03:57 +0800
Subject: [PATCH] read csv works BUT not reflected on plot

* D3.js v5 not working for csv read.
---
 Day1Exercise/Q2/dataset.csv    |  6 ++++++
 Day1Exercise/Q2/scatter.html   |  2 +-
 Day1Exercise/Q2/scatterPlot.js | 37 ++++++++++++++++++++++++++++++----
 Day1Exercise/README.md         |  4 ++++
 README.md                      |  8 +++++++-
 5 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 Day1Exercise/Q2/dataset.csv

diff --git a/Day1Exercise/Q2/dataset.csv b/Day1Exercise/Q2/dataset.csv
new file mode 100644
index 0000000..55cfc52
--- /dev/null
+++ b/Day1Exercise/Q2/dataset.csv
@@ -0,0 +1,6 @@
+x,y
+21,15
+20,20
+5,20
+7,4
+22,6
\ No newline at end of file
diff --git a/Day1Exercise/Q2/scatter.html b/Day1Exercise/Q2/scatter.html
index 682c103..8c9f53a 100644
--- a/Day1Exercise/Q2/scatter.html
+++ b/Day1Exercise/Q2/scatter.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Scatter Plot</title>
-    <script src="https://d3js.org/d3.v6.min.js"></script>
+    <script src="https://d3js.org/d3.v4.min.js"></script>
     <script src="scatterPlot.js"></script>
 </head>
 
diff --git a/Day1Exercise/Q2/scatterPlot.js b/Day1Exercise/Q2/scatterPlot.js
index ffc0fb9..795d255 100644
--- a/Day1Exercise/Q2/scatterPlot.js
+++ b/Day1Exercise/Q2/scatterPlot.js
@@ -1,18 +1,47 @@
 function myScatterPlot() {
     var dataset = [[10, 15], [20, 20], [5, 20], [7, 4], [22, 6]];
+    console.log("entering...");
     
+    //debugger;
+    d3.csv("./dataset.csv", function(error, data)  {
+
+        console.log("callback...")
+        if (error)
+        {
+            console.log("callback error...")
+            throw error;
+        }
+
+        var i=0;
+        data.forEach(d => {
+            d.x = +d.x;
+            d.y = +d.y;
+            //
+            dataset[i][0] = d.x;
+            dataset[i][1] = d.y;
+            i++;
+        });
+
+    });
+
+    // ?? why never plot using update csv data???
+    console.log(dataset);
+
+    // constants
     const WIDTH = 600;
     const HEIGHT = 600;
     const PADDING = 20;
     
     // setup data scaling to fit view
+    // x-scale
     var xScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, d => d[0])])
                     .range([PADDING, WIDTH - PADDING]);
     
+    // y-scale
     var yScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, d => d[1])])
-                    .range([HEIGHT - PADDING, PADDING]);
+                    .range([HEIGHT - PADDING, PADDING]);        // reverse the range as view coordinate start from top-left
     
     // Create SVG element
     var svg = d3.select("body")
@@ -41,13 +70,13 @@ function myScatterPlot() {
         .attr("font-size", "11px")
         .attr("fill", "red");
     
-    // create axes
-    // x axis
+    // draw axes
+    // x axis : transform drawing from top to bottom
     svg.append("g")
         .attr("transform", `translate(0,${HEIGHT-PADDING})`)
         .call(d3.axisBottom()
         .scale(xScale));
-    // y axis
+    // y axis : transform the drawing to display the scale number
     svg.append("g")
         .attr("transform", `translate(${PADDING},0)`)
         .call(d3.axisLeft()
diff --git a/Day1Exercise/README.md b/Day1Exercise/README.md
index 1d3df7d..2b0a621 100644
--- a/Day1Exercise/README.md
+++ b/Day1Exercise/README.md
@@ -25,6 +25,10 @@ Tips :
 * Use SVG circles
 * Scale data by 10 times
 
+Note : 
+* D3.js v5 and v4 have different behaviour for read csv
+* v5 have promise framework. Thus v4 code will not work on v5 
+
 Additional References
 * [Making scatter Plot](https://alignedleft.com/tutorials/d3/making-a-scatterplot)
 * [D3.js Practical Introduction](https://www.youtube.com/watch?v=TOJ9yjvlapY&list=PLAWhhmqB115BFOrcntOGDE-DsDFeXa_i0&index=2&t=0s)
diff --git a/README.md b/README.md
index 443f511..8c4f02d 100644
--- a/README.md
+++ b/README.md
@@ -15,4 +15,10 @@ Developer Kit : Frontend
 
 ## Visual Studio Code Extension
 
-* Live Server
\ No newline at end of file
+* Live Server
+* Debugger for Chrome
+
+## Debugger
+
+* add `debugger` to code to stop and debug at chrome
+* [VS Code Debugger](https://code.visualstudio.com/docs/editor/debugging)