update to D3.js v6 whic use promise pattern

* This code will not work with D3.js v4

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.v4.min.js"></script>
+    <script src="https://d3js.org/d3.v6.min.js"></script>
     <script src="scatterPlot.js"></script>
 </head>
 

Day1Exercise/Q2/scatterPlot.js

@@ -3,14 +3,12 @@ function myScatterPlot() {
     console.log("entering...");
     
     //debugger;
-    d3.csv("./dataset.csv", function(error, data)  {
+    const myPromise = d3.csv("./dataset.csv");
     
+    myPromise.then((data)  => {
+
+        //debugger;
         console.log("callback...")
-        if (error)
-        {
-            console.log("callback error...")
-            throw error;
-        }
 
         var i=0;
         data.forEach(d => {
@@ -22,11 +20,17 @@ function myScatterPlot() {
             i++;
         });
 
+        // plot to view
+        plot(dataset);
+        })
+        .catch(error => {
+            alert("File Missing!!!")
         });
 
-    // ?? why never plot using update csv data???
-    console.log(dataset);
+}
 
+/* Plot the scatter plot graph given the dataset */
+function plot(dataset) {
     // constants
     const WIDTH = 600;
     const HEIGHT = 600;
@@ -43,6 +47,7 @@ function myScatterPlot() {
         .domain([0, d3.max(dataset, d => d[1])])
         .range([HEIGHT - PADDING, PADDING]); // reverse the range as view coordinate start from top-left
 
+
     // Create SVG element
     var svg = d3.select("body")
         .append("svg")

Day1Exercise/README.md

@@ -37,6 +37,7 @@ Additional References
   * ```<script src="https://d3js.org/d3-scale.v3.min.js"></script>```
 * [d3-axis](https://github.com/d3/d3-axis)
   * ```<script src="https://d3js.org/d3-axis.v2.min.js"></script>```
+* [Javascript Promise](https://www.youtube.com/watch?v=fdOa6jrJ0UM)
 
 ## Javascript