D3 Examples - Numeric vs. Numeric scatter plot

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
    svg { width: 100%; height: 100%; }
  </style>
</head>
​
<body>
  <svg></svg>
  <script>
    var margin = {"top": 20, "right": 10, "bottom": 40, "left": 40 }
    var width = 500;
    var height = 500;
    var pointRad = 5;
    var topPadding = 1.1;
    var rightPadding = 1.1;
    
    // data
    var data = [[5, 5],
                [10, 17],
                [8, 10],
                [6, 14],
                [20, 15],
                [18, 16],
                [9, 10],
                [13, 13],
                [3, 8],
                [11, 15],
                [19, 14],
                [5, 15]
               ];
    
    // calculate xMax and yMax
    let xDataMax = function(data) {
      var xMax = data[0][0];
      for (var i = 0; i < data.length; i++) {
        xMax = Math.max(data[i][0], xMax);
        }
      return xMax * rightPadding;
    }    
    let yDataMax = function(data) {
      var yMax = data[0][1];
      for (var i = 0; i < data.length; i++) {
        yMax = Math.max(data[i][1], yMax);
        }
      return yMax * topPadding;
    }
    
    // scales
    var xMax = xDataMax(data);
    var xAxisScale = d3.scaleLinear()
        .domain([0, xMax])
        .range([margin.left, width - margin.right])
    var yMax = yDataMax(data);
    var yAxisScale = d3.scaleLinear()
        .domain([0, yMax])
        .range([height - margin.bottom, margin.top])
    
    // svg element
    var svg = d3.select('svg');
    
    // points
    svg.selectAll('circle')
        .data(data)
        .enter().append('circle')
        .attr('cx', function(d){return xAxisScale(d[0])})
      .attr('cy', function(d){return yAxisScale(d[1])})
        .attr('r', pointRad)
        .attr('fill', 'blue')
    
    // axes
    var xAxis = d3.axisBottom()
        .scale(xAxisScale)
        .ticks(10)
    var yAxis = d3.axisLeft()
        .scale(yAxisScale)
        .ticks(10)
    
   // draw axes
   svg.append('g')
     .attr('transform', 'translate(' + [0, height - margin.bottom] + ')')
     .call(xAxis);
   svg.append('g')
     .attr('transform', 'translate(' + [margin.left, 0] + ')')
     .call(yAxis);
​
  </script>
</body>
​
    