Experiment 5 – rotating orthographic projections

Our previous example was very fascinating. We went from visualizing a map in two dimensions to three dimensions in just a few lines. The next step is to animate it. For this experiment, open http://localhost:8080/chapter-5/example-5.html in the code samples. Let's now piece it together:

var i = 0;

We added an index variable that will hold the rotation rate. Don't worry; we'll explain how this is used here:

d3.json('world.json', function(data) {
var countries = topojson.feature(data, data.objects.countries);
var mexico = countries.features[102];

As Mexico is the center of the universe and requires special attention, we isolated it into its own variable by taking the corresponding feature from the countries feature array. This will allow us to manipulate it separately from the rest of the globe:

var map = svg.append('g').attr('class', 'boundary');
var world = map.selectAll('path').data(countries.features);
var mexico = map.selectAll('.mexico').data...