Experiment 4 – orthographic projections

For the next set of experiments in this chapter, we will switch gears and look at interactivity with orthographic projections (representing a three-dimensional map on a two-dimensional screen). A better visualization to illustrate these concepts is the entire globe instead of a single country. This experiment will start with http://localhost:8080/chapter-5/example-4.html and require a new datafile, which is provided for you. You will notice that the code base is almost identical, with the exception of three changes that we will outline here:

var height = 600; 
var width = 900; 
var projection = d3.geoOrthographic().clipAngle(90); 
var path = d3.geoPath().projection(projection); 

First, we will change our d3.geo projection from d3.geoMercator to d3.geoOrthographic. We also have an additional setting to configure: the clipAngle at 90 degrees. This places an imaginary plane through the globe and clips the back of the projection:

d3.json('world.json').then...