Map Pan / Zoom with Cities and Text v5

This is a simple map example with pan and zoom centered on the Pacific with added cities and text

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 5 of d3.js.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}
</style>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script>
var width = 960,
    height = 500;

var projection = d3.geoMercator()
    .center([0, 5 ])
    .scale(150)
    .rotate([-180,0]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geoPath()
    .projection(projection);

var g = svg.append("g");

// load and display the World
d3.json("world-110m2.json").then(function(topology) {

g.selectAll("path")
       .data(topojson.feature(topology, topology.objects.countries)
           .features)
       .enter().append("path")
       .attr("d", path);

// load and display the cities
    d3.csv("cities.csv").then(function(data) {
        g.selectAll("circle")
           .data(data)
           .enter()
           .append("a")
			    	  .attr("xlink:href", function(d) {
				    	  return "https://www.google.com/search?q="+d.city;}
		    		  )
           .append("circle")
           .attr("cx", function(d) {
                   return projection([d.lon, d.lat])[0];
           })
           .attr("cy", function(d) {
                   return projection([d.lon, d.lat])[1];
           })
           .attr("r", 5)
           .style("fill", "red");

g.selectAll("text")
           .data(data)
           .enter()
         .append("text") // append text
           .attr("x", function(d) {
                   return projection([d.lon, d.lat])[0];
           })
           .attr("y", function(d) {
                   return projection([d.lon, d.lat])[1];
           })
           .attr("dy", -7) // set y position of bottom of text
           .style("fill", "black") // fill the text with the colour black
           .attr("text-anchor", "middle") // set anchor y justification
           .text(function(d) {return d.city;}); // define the text to display
    });
});

var zoom = d3.zoom()
      .scaleExtent([1, 8])
      .on('zoom', function() {
          g.selectAll('path')
           .attr('transform', d3.event.transform);
          g.selectAll("circle")
           .attr('transform', d3.event.transform);
          g.selectAll("text")
           .attr('transform', d3.event.transform);
});

svg.call(zoom);
  
</script>
</body>
</html>

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

https://unpkg.com/topojson@3