block by d3noob 287bdde52113349cb104324b6f33f270

Map Pan / Zoom with Cities and Text v7

Full Screen

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 7 of d3.js.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}
</style>
<body>
<script src="https://d3js.org/d3.v7.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(event) {
          g.selectAll('path')
           .attr('transform', event.transform);
          g.selectAll("circle")
           .attr('transform', event.transform);
          g.selectAll("text")
           .attr('transform', event.transform);
});

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

cities.csv

code,city,country,lat,lon
ZNZ,ZANZIBAR,TANZANIA,-6.13,39.31
TYO,TOKYO,JAPAN,35.68,139.76
AKL,AUCKLAND,NEW ZEALAND,-36.85,174.78
BKK,BANGKOK,THAILAND,13.75,100.48
DEL,DELHI,INDIA,29.01,77.38
SIN,SINGAPORE,SINGAPOR,1.36,103.75
BSB,BRASILIA,BRAZIL,-15.67,-47.43
RIO,RIO DE JANEIRO,BRAZIL,-22.90,-43.24
YTO,TORONTO,CANADA,43.64,-79.40
IPC,EASTER ISLAND,CHILE,-27.11,-109.36
SEA,SEATTLE,USA,47.61,-122.33