scatter plot

<!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; }
    
    .chart-scatter {
      border: 1px solid #ddd;
      margin: 30px;
    }
    .label {
      font-family: "Georgia", serif;
      font-weight: 500;
      text-anchor: middle;
    }
  </style>
</head>

class ScatterPlot {
      static get defaults() {
        return {
          width: 400,
          height: 200,
          margin: { top: 15, right: 15, bottom: 15, left: 15 }
        }
      }

constructor(config) {
        this.configure(config);
        this.init();
        this.update = this.update.bind(this);
      }
      
      configure(config) {
        Object.assign(this, ScatterPlot.defaults, config);
      }
      
      init() {
        const { element, margin, data, width, height } = this;
        
        this.innerWidth = width - margin.left - margin.right;
        this.innerHeight = height - margin.top - margin.bottom;
        
        this.svg = d3.select(element)
          .append("svg")
        	.attr('class', 'chart chart-scatter')
          .attr("width", width)
          .attr("height", height)
        .append('g')
        	.attr('transform', `translate(${margin.top},${margin.left})`)
        ;
        
        this.render(data);
      }
      
      update(data) {
        this.render(data);
      }
      
      render(data) {
        const { svg, innerHeight, innerWidth } = this;

const title = svg.append("text")
        	.attr('class', 'label')  
          .attr("y", innerHeight)
          .attr("x", (innerWidth / 2))
        	.text("Population")
        ;
      }
    }
    
    const splot = new ScatterPlot({
      element: 'body'
    });
    
		function type(d) {
			d.population = +d.population;
			d.lat = +d.lat;
			d.lon = +d.lon;

return d;
		}

d3.csv('data.csv', type, splot.update);
  </script>
</body>

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