styling scatter plot

5 years ago · 1e29734cb2
parent aa8c41f346
commit 1e29734cb2
2 changed files with 24 additions and 7 deletions
--- a/Day1Exercise/Q2/scatter.html
+++ b/Day1Exercise/Q2/scatter.html
@ -7,6 +7,20 @@
    <title>Scatter Plot</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <script src="scatterPlot.js"></script>
+    <style> 
+        .dot {
+           fill: yellow;
+           stroke: black;
+           stroke-width: 1px;
+        }
+
+        .xy {
+            
+            font-family: sans-serif;
+            font-size: 16px;
+            fill: black;
+        }
+     </style>
 </head>

 <body>
--- a/Day1Exercise/Q2/scatterPlot.js
+++ b/Day1Exercise/Q2/scatterPlot.js
@ -12,14 +12,12 @@ function myScatterPlot() {

            var i = 0;
            var csvDataset = new Array(data.length);
-            for (var ii = 0; ii < csvDataset.length; ii++) { 
-                csvDataset[ii] = new Array(2); 
-            } 
            //
            data.forEach(d => {
                d.x = +d.x;
                d.y = +d.y;
                //
+                csvDataset[i] = new Array(2); 
                csvDataset[i][0] = d.x;
                csvDataset[i][1] = d.y;
                i++;
@ -43,16 +41,19 @@ function plot(dataset) {

    // setup data scaling to fit view
    // x-scale
+    // domain : real world domain
+    // range : viewport range
    var xScale = d3.scaleLinear()
        .domain([0, d3.max(dataset, d => d[0])])
        .range([PADDING, WIDTH - PADDING]);

    // y-scale
+    // domain : real world domain
+    // range : viewport range
    var yScale = d3.scaleLinear()
        .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")
@ -66,7 +67,8 @@ function plot(dataset) {
        .append("circle")
        .attr("cx", pt => xScale(pt[0]))
        .attr("cy", pt => yScale(pt[1]))
-        .attr("r", 5);
+        .attr("r", 2)
+        .attr("class", "dot");

    // create label for each point
    svg.selectAll("text")
@ -76,9 +78,10 @@ function plot(dataset) {
        .text(pt => `${pt[0]},${pt[1]}`)
        .attr("x", pt => xScale(pt[0]))
        .attr("y", pt => yScale(pt[1]))
-        .attr("font-family", "sans-serif")
+        .attr("class", "xy");
+/*         .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
-        .attr("fill", "red");
+        .attr("fill", "red"); */

    // draw axes
    // x axis : transform drawing from top to bottom