D3 Examples - Flatten sphere w/ d3 and svg path transitions!

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
path {
  fill: none;
  stroke-linejoin: round;
}
​
.graticule {
  stroke: #aaa;
}
​
.equator {
  stroke: red;
  stroke-width: 2px;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript"></script>
<script src="https://d3js.org/topojson.v1.js"></script>
​
<script>
​
var width = 1060,
    height = 600;
​
var g1 = d3.geo.orthographic()
  .rotate([10, -10])
  .center([-10, 10])
  .scale(240)
  .translate([width / 2, height / 2]);
var g2 = d3.geo.equirectangular()
  .scale(153)
  .translate([width / 2, height / 2]);
​
var proj = interpolatedProjection(g1, g2);
var patx = d3.geo.path().projection(proj);
var graticule = d3.geo.graticule();
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
var feature = svg.selectAll("path");
​
d3.json('brazilWor.json',function(world){
  var feat = topojson.feature(world,world.objects.countries110).features;
  svg.selectAll('.coun').data(feat).enter().append('path')
    .attr('d',patx)
    .attr('class','coun')
    .style('fill','blue');
​
  svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", patx);
​
  var cord = [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]];
  svg.append("path").datum({type: "LineString", coordinates: cord})
    .attr("class", "equator")
    .attr("d", patx);
​
  feature = svg.selectAll("path");
  animation();
})
​
function animation() {
  svg.transition()
      .duration(10500)
      .tween("projection", function() {
        return function(_) {
          animation.alpha(_);
          feature.attr("d", patx);
        };
      });
}
​
function interpolatedProjection(a, b) {
  var px = d3.geo.projection(raw).scale(1), α;
​
  function raw(λ, φ) {
    var pa = a([λ *= 180 / Math.PI, φ *= 180 / Math.PI]), pb = b([λ, φ]);
    return [(1 - α) * pa[0] + α * pb[0], (α - 1) * pa[1] - α * pb[1]];
  }
​
  animation.alpha = function(_x) {
    if (!arguments.length) return α;
    α = +_x;
    var ca = a.center(), cb = b.center(),
        ta = a.translate(), tb = b.translate();
    console.log(α, ca, cb);
    px.center([(1 - α) * ca[0] + α * cb[0], (1 - α) * ca[1] + α * cb[1]]);
    px.translate([(1 - α) * ta[0] + α * tb[0], (1 - α) * ta[1] + α * tb[1]]);
    return px;
  };
  animation.alpha(0);
  return px;
}
​
</script>
​
    