Population by City (+100k)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      
      svg {
        background: black;
      }

circle {
        opacity: 0.5;
      }

</style>
  </head>
  <body>
    <script>

const outerWidth = 1000,
            outerHeight = 500,
            margin = { left: -50, top: 0, right: -50, bottom: 0 },
            innerWidth = outerWidth - margin.left - margin.right,
            innerHeight = outerHeight - margin.top - margin.bottom,
            xColumn = 'longitude',
            yColumn = 'latitude',
            rColumn = 'population',
            colorColumn = 'population',
            peoplePerPixel = 100000;

const svg = d3.select("body").append("svg")
        .attr("width",  outerWidth)
        .attr("height", outerHeight);

const g = svg.append('g')
        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

const xScale = d3.scale.linear().range([0, innerWidth]),
            yScale = d3.scale.linear().range([innerHeight, 0]),
            rScale = d3.scale.sqrt(),
            colorScale = d3.scale.linear().range(['#ddd', '#f00']);

function render(data){

xScale.domain(d3.extent(data, d => d[xColumn]));
        yScale.domain(d3.extent(data, d => d[yColumn]));
        rScale.domain([0, d3.max(data, d => d[rColumn])]);
        colorScale.domain([0, d3.max(data, d => d[colorColumn])]);

// Compute the size of the biggest circle as a function of peoplePerPixel.
        const peopleMax = rScale.domain()[1],
              rMin = 0,
              rMax = Math.sqrt(peopleMax / (peoplePerPixel * Math.PI));

rScale.range([rMin, rMax]);

// Bind data
        const circles = g.selectAll("circle").data(data);
        
        // Enter
        circles.enter().append("circle");

// Update
        circles
          .attr("cx", d => xScale(d[xColumn]))
          .attr("cy", d => yScale(d[yColumn]))
          .attr("r",  d => rScale(d[rColumn]))
          .attr("fill", d => colorScale(d[colorColumn]));

// Exit
        circles.exit().remove();
      }

function type(d) {
        d.latitude   = +d.latitude;
        d.longitude  = +d.longitude;
        d.population = +d.population;
        return d;
      }

d3.csv('data.csv', type, render);

</script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js