D3 Examples - Random World Tour with flags

Random World Tour with flags
Forked from Mike's gist with the intention to
[X] randomize the walk
[ ] Zooming in (and out) could use Zoom to Bounding Box II
[X] use the country flag as background.
The assumption is that the convention Flag_of_county name holds and makes it possible to link the relevant svg file in Wikipedia.
Some scripts to create a .tsv for country flags (but manual editing/checks was needed...)
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.country {
  fill: #b8b8b8;
  stroke: #fff;
  stroke-width: .5px;
  stroke-linejoin: round;
}
​
.graticule {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: .5px;
}
​
.graticule-outline {
  fill: none;
  stroke: #333;
  stroke-width: 1.5px;
}
​
text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-anchor: middle;
}
​
</style>
<h1></h1>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
<script>
​
var width = 960,
    height = 500;
​
var projection = d3.geo.orthographic()
    .scale(248)
    .clipAngle(90);
​
var path = d3.geo.path()
    .projection(projection);
​
var graticule = d3.geo.graticule()
    .extent([[-180, -90], [180 - .1, 90 - .1]]);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
var line = svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);
​
svg.append("circle")
    .attr("class", "graticule-outline")
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .attr("r", projection.scale());
​
var title = svg.append("text")
    .attr("x", width / 2)
    .attr("y", height * 3 / 5);
​
var flag = svg.append("image")
    .attr("width", 100)
    .attr("height", 100)
    .attr("x", width / 2 + 3)
    .attr("y", height * 3 / 5 + 3)
    .attr("preserveAspectRatio", "xMinYMin");
​
queue()
    .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json")
    .defer(d3.tsv, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-country-names.tsv")
    .defer(d3.tsv, "world-country-flags.tsv")
    .await(ready);
​
function ready(error, world, names, flags) {
  var globe = {type: "Sphere"},
      land = topojson.object(world, world.objects.land),
      countries = topojson.object(world, world.objects.countries).geometries,
      borders = topojson.mesh(world,
                              world.objects.countries,
                              function(a, b) { return a.id !== b.id; }),
      i = -1,
      n = 0;
​
  countries = countries.filter(function(d) {
    return names.some(function(n) {
      if (d.id == n.id) return d.name = n.name;
    });
  });
  n = countries.length; // total countries after filtering
​
  flags.sort(function(a,b) {return +a.id < +b.id ? -1 : +a.id > +b.id ? +1 : 0;});
​
  var country = svg.selectAll(".country")
      .data(countries)
    .enter().insert("path", ".graticule")
      .attr("class", "country")
      .attr("d", path);
​
​
​
  (function transition() {
    d3.transition()
        .delay(250)
        .duration(1250)
        .each("start", function() { // listen for the transition's start event
​
          // 1. choose a country randomly
          // https://stackoverflow.com/questions/1527803/
          // random integer from min (inclusive) to Max (exclusive):
          //    min + Math.floor((Max - min + 1) * Math.random())
          // min=0, Max=n-1  --> 0 + Math.floor((n - 1 - 0 + 1) * Math.random())
          i = Math.floor(n * Math.random());
​
          // 2. show its name (no fancy positioning, just absolute coordinates [see style above])
          title.text(countries[i].name);
          flag.attr("xlink:href", "");
          for (var f=0, id = countries[i].id; f < flags.length; ++f) {
            if (flags[f].id == id) {
              flag.attr("xlink:href", flags[f].url);
              break;
            }
          }
        })
        .tween("rotate", function() {
          // center on centroid
          var p = d3.geo.centroid(countries[i]),
              r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
          return function(t) {
            projection.rotate(r(t));
            country.attr("d", path)
                   .style("fill", function(d, j) { return j === i ? "red" : "#b8b8b8"; });
            line.attr("d", path);
          };
        })
      .transition()
        .each("end", transition);
  })();
}
​
</script>
​
    