fresh block test

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    h1 {
        position: absolute;
        top: 500px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 18px;
        text-align: center;
        width: 960px;
    }

.graticule {
        fill: none;
        stroke-width: 10px;
        stroke: purple;
    }

.circleThing {
        fill: none;
        stroke-width: 0;
    }
</style>
<h1></h1>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
    var width = 960;
    var height = 960;

var projection = d3.geo.orthographic()
        .translate([width / 2, height / 2])
        .scale(width / 2 - 20)
        .clipAngle(90)
        .precision(0.6);

var canvas = d3.select("body").append("canvas")
        .attr("width", width)
        .attr("height", height);

var c = canvas.node().getContext("2d");

var path = d3.geo.path()
        .projection(projection)
        .context(c);

var title = d3.select("h1");
    var ppp = d3.select("p");
    var h2 = d3.select("h2");

queue()
        .defer(d3.json, "world-110m.json")
        .defer(d3.json, "mig.json")
        .await(ready);

function ready(error, world, routes) {
        if (error) throw error;
        var globe = { type: "Sphere" };
        var land = topojson.feature(world, world.objects.land);
        var borders = topojson.mesh(world, world.objects.countries, function (a, b) { return a !== b; });
        var i = -1;
        var rt = "";
        var rl = routes.length;
        var mp = "";

(function transition() {
            d3.transition()
                .duration(1250)
                .each("start", function () {
                    title.text(i + ", " + [i = (i + 1) % rl]);
                    title.text(i);
                    title.text(routes[i].bplace);
                })
                .tween("rotate", function () {

var x1 = parseFloat(routes[i].Blon);
                    var y1 = parseFloat(routes[i].Blat);
                    var x2 = parseFloat(routes[i].Dlon);
                    var y2 = parseFloat(routes[i].Dlat);

var xx = (x1 + x2) / 2;
                    var yy = (y1 + y2) / 2;

var p = [xx, yy];

var r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
                    return function (t) {
                        projection.rotate(r(t));
                        c.clearRect(0, 0, width, height);
                        c.fillStyle = "#ccc", c.beginPath(), path(land), c.fill(); //gray countries
                        c.strokeStyle = "#fff", c.lineWidth = .5, c.beginPath(), path(borders), c.stroke();
                        c.strokeStyle = "#000", c.lineWidth = 3, c.beginPath(), path(globe), c.stroke();

c.beginPath(),
                        c.arc(routes[i].Blon, routes[i].Blat, 10, 0 * Math.PI, 2 * Math.PI),
                        c.stroke(),
                        c.fill();

c.strokeStyle = "#0000FB",
                        c.fillStyle = "white",
                        c.lineWidth = 4,
                        path({ type: "LineString", coordinates: [[routes[i].Blon, routes[i].Blat], [routes[i].Dlon, routes[i].Dlat]] }),
                        c.fill();

ppp.text = c.strokeStyle;
                        c.stroke();
                        c.beginPath();
                    };
                })
              .transition()
              .each("end", transition);
        })();
    }
</script>

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js