Creating a rotating globe

The Orthographic projection displays the Earth like a 3D object, but it only shows us one side at a time, and only the center is shown accurately. In this section, we will use this projection and the zoom behavior to allow the user to explore the features by rotating and zooming in on the globe.

The code of this example is available in the chapter11/02-rotating file of the code bundle. We will begin by drawing a globe using the Orthographic projection. As we did in the previous section, we load the TopoJSON data and construct the GeoJSON feature collection that represents the ne_50m_land object:

d3.json('/chapter11/data/land.json', function(error, data) {

    // Handle errors getting or parsing the data
    if (error) { console.error(error); }

    // Construct the GeoJSON feature collection using TopoJSON
    var geojson = topojson.feature(data, data.objects.ne_50m_land);

    // Create the svg container...
});

We set the width and height of the svg element...