Cities with Over 1,000,000 Residents

<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>

path {
    fill: none;
    stroke: black;
    stroke-width: .7px;
  }
</style>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>  
  
var width = 960;
var height = 600;
var margin = {top: 0, bottom: 0, left: 0, right: 0}
var bigCities = new Map();

d3.queue()
    .defer(d3.json, "world.json")
    .defer(d3.csv, "globalCities.csv")
    .await(ready)

function ready(error, world, cities) {
  cities.forEach(function(d){
    if(Number(d.pop) > 1000000){ bigCities.set(d.city, {"pop": +d.pop, "lat": +d.lat, "lon": +d.lng}) }
  })

var projection = d3.geoMercator()
  var path = d3.geoPath().projection(projection) // Geopath generator
  var zoomExtent = d3.zoom().scaleExtent([1, 20]);

function zoom() {
    g.attr("transform", d3.event.transform)
  }

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.bottom + margin.top)
    .style("background-color","lightgrey")
    .call(zoomExtent
        .on("zoom", zoom))

var g = svg.append("g")
      .attr("class", "mapInformation")
      .attr("transform",`translate(8,${margin.top})`)

bigCities.forEach(function(d){
    console.log(projection([d.lon,d.lat]))
    g.append("circle")
      .attr("cx", () => projection([d.lon,d.lat])[0])
      .attr("cy", () => projection([d.lon,d.lat])[1])
      .attr("r", 2)
  })

var circles = g.selectAll("circle")
    .data(bigCities.entries())
    .enter()
    .append("circle")

var paths = g.selectAll("path")
      .data(world.geometries)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("transform","translate(0,0)")

}
</script>

https://code.jquery.com/jquery-3.2.1.slim.min.js

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

https://d3js.org/topojson.v2.min.js