update Q2 scatter plot

5 years ago · c74d3751e9
parent 52aa184656
commit c74d3751e9
2 changed files with 45 additions and 61 deletions
--- a/Day1Exercise/Q2/scatter.html
+++ b/Day1Exercise/Q2/scatter.html
@ -5,27 +5,12 @@
    <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" 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="https://d3js.org/d3.v6.min.js"></script>
    <script src="scatterPlot.js"></script>
 </head>

 <body>
    <button onclick="myScatterPlot()">Plot</button>
-    <!-- <svg width=600 height=600>
-        <circle cx="10" cy="15" r="1" fill="blue"
-        transform="scale(10)" />
-        <circle cx="20" cy="20" r="1" fill="blue"
-        transform="scale(10)" />
-        <circle cx="5" cy="20" r="1" fill="blue"
-        transform="scale(10)" />
-        <circle cx="7" cy="4" r="1" fill="blue"
-        transform="scale(10)" />
-        <circle cx="22" cy="6" r="1" fill="blue"
-        transform="scale(10)" />
-    </svg> -->
-
 </body>

 </html>
--- a/Day1Exercise/Q2/scatterPlot.js
+++ b/Day1Exercise/Q2/scatterPlot.js
@ -1,56 +1,55 @@
 function myScatterPlot() {
    var dataset = [[10, 15], [20, 20], [5, 20], [7, 4], [22, 6]];
-
-
-    var svg = d3.select("body")
-        .append('svg')
-        .attr("width", 600)
-        .attr("height", 600);
-
+    
+    const WIDTH = 600;
+    const HEIGHT = 600;
+    const PADDING = 20;
+    
+    // setup data scaling to fit view
    var xScale = d3.scaleLinear()
-        .domain([0, d3.max(dataset, function (d) { return d[0]; })])
-        .range([0, 600]);
-
+                    .domain([0, d3.max(dataset, d => d[0])])
+                    .range([PADDING, WIDTH - PADDING]);
+    
    var yScale = d3.scaleLinear()
-        .domain([0, d3.max(dataset, function (d) { return d[1]; })])
-        .range([0, 600]);
-
-    var rScale = d3.scaleLinear()
-        .domain([0, d3.max(dataset, function (d) { return d[1]; })])
-        .range([2, 5]);
-
-    // https://alignedleft.com/tutorials/d3/making-a-scatterplot
-    svg.selectAll("circle").data(dataset).enter().append("circle")
-        /* .attr("transform", function (d, i) { return "scale(10)" }) */
-        .attr("fill", "blue")
-        .attr("cx", function (d) { return xScale(d[0]); })
-        .attr("cy", function (d) { return yScale(d[1]); })
-        .attr("r", rScale(1));
-
-    // print text next to the point
+                    .domain([0, d3.max(dataset, d => d[1])])
+                    .range([HEIGHT - PADDING, PADDING]);
+    
+    // Create SVG element
+    var svg = d3.select("body")
+        .append("svg")
+        .attr('width', WIDTH)
+        .attr("height", HEIGHT);
+    
+    // create circle dot datapoint
+    svg.selectAll("circle")
+    .data(dataset)
+    .enter()
+    .append("circle")
+    .attr("cx", pt => xScale(pt[0]))
+    .attr("cy", pt => yScale(pt[1]))
+    .attr("r", 5);
+    
+    // create label for each point
    svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
-        /* .attr("transform", function (d, i) { return "scale(10)" }) */
-        .text(function (d) {
-            return d[0] + "," + d[1];
-        })
-        .attr("x", function (d) {
-            return d[0] + 1;
-        })
-        .attr("y", function (d) {
-            return d[1];
-        })
+        .text(pt => `${pt[0]},${pt[1]}`)
+        .attr("x", pt => xScale(pt[0]))
+        .attr("y", pt => yScale(pt[1]))
        .attr("font-family", "sans-serif")
-        .attr("font-size", "1px")
+        .attr("font-size", "11px")
        .attr("fill", "red");
-
-
-    // setup axis
-    //var xAxis = svg.append('g').call(d3.axisBottom());
-
-    /*                <circle cx="0" cy="0" r="10" fill="blue"
-                   transform="scale(4)" />
-    */
+    
+    // create axes
+    // x axis
+    svg.append("g")
+        .attr("transform", `translate(0,${HEIGHT-PADDING})`)
+        .call(d3.axisBottom()
+        .scale(xScale));
+    // y axis
+    svg.append("g")
+        .attr("transform", `translate(${PADDING},0)`)
+        .call(d3.axisLeft()
+        .scale(yScale));
 }