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;
@@ -35,13 +39,14 @@ function myScatterPlot() {
     // setup data scaling to fit view
     // x-scale
     var xScale = d3.scaleLinear()
-                    .domain([0, d3.max(dataset, d => d[0])])
+        .domain([0, d3.max(dataset, d => d[0])])
-                    .range([PADDING, WIDTH - PADDING]);
+        .range([PADDING, WIDTH - PADDING]);
 
     // y-scale
     var yScale = d3.scaleLinear()
-                    .domain([0, d3.max(dataset, d => d[1])])
+        .domain([0, d3.max(dataset, d => d[1])])
-                    .range([HEIGHT - PADDING, PADDING]);        // reverse the range as view coordinate start from top-left
+        .range([HEIGHT - PADDING, PADDING]); // reverse the range as view coordinate start from top-left
+
 
     // Create SVG element
     var svg = d3.select("body")
@@ -51,12 +56,12 @@ function myScatterPlot() {
 
     // create circle dot datapoint
     svg.selectAll("circle")
-    .data(dataset)
+        .data(dataset)
-    .enter()
+        .enter()
-    .append("circle")
+        .append("circle")
-    .attr("cx", pt => xScale(pt[0]))
+        .attr("cx", pt => xScale(pt[0]))
-    .attr("cy", pt => yScale(pt[1]))
+        .attr("cy", pt => yScale(pt[1]))
-    .attr("r", 5);
+        .attr("r", 5);
 
     // create label for each point
     svg.selectAll("text")
@@ -73,12 +78,12 @@ function myScatterPlot() {
     // draw axes
     // x axis : transform drawing from top to bottom
     svg.append("g")
-        .attr("transform", `translate(0,${HEIGHT-PADDING})`)
+        .attr("transform", `translate(0,${HEIGHT - PADDING})`)
         .call(d3.axisBottom()
-        .scale(xScale));
+            .scale(xScale));
     // y axis : transform the drawing to display the scale number
     svg.append("g")
         .attr("transform", `translate(${PADDING},0)`)
         .call(d3.axisLeft()
-        .scale(yScale));
+            .scale(yScale));
 }

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