draw axes

playground/scatterplot.js

@@ -3,16 +3,18 @@ var dataset = [
     [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
 ];
 
-const WIDTH = 600
+const WIDTH = 600;
-const HEIGHT = 600
+const HEIGHT = 600;
+const PADDING = 20;
 
+// setup data scaling to fit view
 var xScale = d3.scaleLinear()
                 .domain([0, d3.max(dataset, d => d[0])])
-                .range([0, WIDTH]);
+                .range([PADDING, WIDTH - PADDING]);
 
 var yScale = d3.scaleLinear()
                 .domain([0, d3.max(dataset, d => d[1])])
-                .range([0, HEIGHT]);
+                .range([HEIGHT - PADDING, PADDING]);
 
 // Create SVG element
 var svg = d3.select("body")
@@ -40,3 +42,15 @@ svg.selectAll("text")
     .attr("font-family", "sans-serif")
     .attr("font-size", "11px")
     .attr("fill", "red");
+
+// 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));