read csv works BUT not reflected on plot

* D3.js v5 not working for csv read.

Day1Exercise/Q2/dataset.csv

@@ -0,0 +1,6 @@
+x,y
+21,15
+20,20
+5,20
+7,4
+22,6

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>
 

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()

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)

README.md

@@ -15,4 +15,10 @@ Developer Kit : Frontend
 
 ## Visual Studio Code Extension
 
-* Live Server
+* 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)