concept globe in category d3

This is an excerpt from Manning's book D3.js in Action, Second Edition: Data visualization with JavaScript. Login to get full access to this book.

WebGL—The <canvas> element allows you to use WebGL to draw, so that you can create 3D objects. You can also create 3D objects like globes and polyhedrons using SVG, which we’ll get into a bit in chapter 8 as we examine geospatial information visualization.

Figure 8.1. Mapping with D3 takes many forms and offers many options, including topology operations like merging and finding neighbors (section 8.4), globes (section 8.3.1), spatial calculations (section 8.1.4), and data-driven maps (section 8.1) using novel projections (section 8.1.3).

8.3.1. Creating and rotating globes

We’ll do only one thing in 3D in this entire book and that’s create a globe. We don’t need to use three.js or learn WebGL. Instead, we’ll take advantage of a trick of one of the geographic projections available in D3: the orthographic projection, which renders geographic data as it would appear from a distant point viewing the entire globe. We need to update our projection to refer to the orthographic projection and have a slightly different scale, as shown in the following listing.

Listing 8.12. Creating a simple globe

    projection = d3.geoOrthographic()
       .scale(200)
       .translate([250, 250])
       .center([0,0]);

copy

With this new projection, you can see what looks like a globe in figure 8.11.

Figure 8.11. An orthographic projection makes our map look like a globe. Notice that even though the paths for countries are drawn over each other, they’re still drawn above the graticules. Also notice that although zooming in and out works, panning doesn’t spin the globe but instead moves it around the canvas. The coloration of our countries is once again based on the graphical size of the country.

To make it rotate, we need to use d3.mouse, which returns the current position of the mouse on the SVG canvas. Pair this with event listeners to turn on and off a mousemove listener on the canvas. This simulates dragging the globe, which we’ll use only to rotate it along the x-axis. Because we’re introducing new behavior and it’s been a while since we looked at the full code, the following listing has the entire code for creating the globe.