scatter plot

Day1Exercise/Q2/scatter.html

@@ -5,7 +5,9 @@
     <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.v5.min.js"></script>
+    <script src="https://d3js.org/d3.v5.min.js" defer></script>
+    <script src="https://d3js.org/d3-scale.v3.min.js" defer></script>
+    <script src="https://d3js.org/d3-axis.v2.min.js" defer></script>
     <script src="scatterPlot.js"></script>
 </head>
 

Day1Exercise/Q2/scatterPlot.js

@@ -7,15 +7,15 @@ function myScatterPlot() {
         .attr("width", 600)
         .attr("height", 600);
 
-    var xScale = d3.scale.linear()
+    var xScale = d3.scaleLinear()
         .domain([0, d3.max(dataset, function (d) { return d[0]; })])
-        .range([0, w]);
+        .range([0, 600]);
 
-    var yScale = d3.scale.linear()
+    var yScale = d3.scaleLinear()
         .domain([0, d3.max(dataset, function (d) { return d[1]; })])
-        .range([0, h]);
+        .range([0, 600]);
 
-    var rScale = d3.scale.linear()
+    var rScale = d3.scaleLinear()
         .domain([0, d3.max(dataset, function (d) { return d[1]; })])
         .range([2, 5]);
 
@@ -48,11 +48,8 @@ function myScatterPlot() {
 
 
     // setup axis
-    var xAxis = d3.svg.axis();
-    xAxis.scale(xScale);
-    xAxis.orient("bottom");
-    svg.append("g")
-        .call(xAxis);
+    //var xAxis = svg.append('g').call(d3.axisBottom());
+
     /*                <circle cx="0" cy="0" r="10" fill="blue"
                    transform="scale(4)" />
     */

Day1Exercise/README.md

@@ -6,11 +6,11 @@
 * [HTML5 Developer Guide](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
 * [Web Technology for Developer](https://developer.mozilla.org/en-US/docs/Web)
 
-Useful html tags `<header>,<article><footer><section>`
+Useful html tags `<header><article><footer><section>`
 
 Sample Output
 
-![](BusinessCard.png)
+![](BusinessCard.PNG)
 
 
 ## [D3.JS](https://d3js.org/)
@@ -21,10 +21,18 @@ Draw a scatter plot graph
 Data = [ [ 10,15], [20,20], [5,20], [7,4], [22, 6] ]
 ```
 
-Tips : Use SVG circles
-
-Scale data by 10 times
-
+Tips : 
+* Use SVG circles
+* Scale data by 10 times
+
+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)
+* [Interactive chart with D3.js](https://www.youtube.com/watch?v=aHJCt2adSWA&list=PLAWhhmqB115BFOrcntOGDE-DsDFeXa_i0&index=3&t=0s)
+* [d3-scale](https://github.com/d3/d3-scale)
+  * ```<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