Zooming into and rotating a globe projection is a truly joyous pastime, I find. Apart from being such fun, it’s also extremely useful when dealing with globe projections, as the user needs to be able to view the world from different angles.

In this section, we will add our first bit of Canvas interactivity to the globe. We will equip the users with the ability to zoom into and rotate the globe. Apart from setting up two additional global variables, we will exclusively do work in the ready() function–our central function tasked to prepare the data. From now onward, it will also deal with interactivity, right here:

function ready(world) {
  var countries = topojson.feature(world, 
  world.objects.ne_110m_admin_0_countries);
  requestAnimationFrame(function() {
    renderScene(countries);
  });

  /* Interactivity goes here */
}

Also, note that we wrapped our renderScene() function into a requestAnimationFrame() function to always let the browser decide the best time point for a new render.

Note, that here is a prominent and often preferred way to deal with zooming and panning (not so much rotating) in D3 using context.scale() and context.translate(). However, to implement both zooming and rotating, we won’t use these in-built methods, but will change the projection instead. We’ll get back to the why a little later as it becomes clear on the way.