scatter chart

<!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; }
    circle {fill: blue; opacity: 0.5}
    .axis {font-size: 12px;}
    .axis-title {font-size: 15px; fill: gray;}
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    const width  = 960;
    const height = 500;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
    
    const margins = {
      top: 50,
      bottom: 50,
      left: 50,
      right: 50
    };
    
    d3.json("nations.json", function(err, data) {
      
      const circleRadius = 8;
      const xExtent = d3.extent(data, (d) => d.income);
      const yExtent = d3.extent(data, (d) => d.lifeExpectancy);

const xScale = d3.scaleLinear()
      								 .domain(xExtent)
      								 .range([margins.left, width - margins.right]);
      const yScale = d3.scaleLinear()
      								 .domain(yExtent)
      								 .range([height - margins.bottom, margins.top]);
      
      var circles = svg.append("g")
      								 .attr("class", "circles")
      								 .selectAll("circle")
      									 .data(data)
      									 .enter()
      									 .append("circle")
      									 .attr("cx", (d) => xScale(d.income))
      									 .attr("cy", (d) => yScale(d.lifeExpectancy))
      									 .attr("r", circleRadius);
      const xAxis = d3.axisBottom(xScale);
      const yAxis = d3.axisLeft(yScale);
      
      const axisX = svg.append("g")
          .attr("class", "axis")
          .attr("transform", "translate(0," + (height - margins.bottom) + ")")
          .call(xAxis);
      
      const axisY = svg.append("g")
      	  .call(yAxis)
          .attr("class", "axis")
          .attr("transform", "translate(" + margins.left + ",0)");
      
      const titleX = axisX.append("text")
      									  .text("Per capita income")
      										.attr("transform", "translate(" + [width - margins.right, 0 - margins.bottom / 4] + ")")
      										.attr("text-anchor", "end")
                          .attr("class", "axis-title");
      
      const titleY = axisY.append("text")
      									  .text("Life expectancy")
      										.attr("transform", "translate(" + [margins.left / 2, margins.top] + ")" + " rotate(-90)")
      										.attr("text-anchor", "end")
                          .attr("class", "axis-title");

})

</script>
</body>

https://d3js.org/d3.v4.min.js