Flatten sphere w/ d3 and svg path transitions!

forked from mpmckenna8's block: Flatten sphere w/ d3 and svg path transitions!

forked from earthjs's block: Flatten sphere w/ d3 and svg path transitions!

<!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>

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 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>

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

Modified http://d3js.org/topojson.v1.js to a secure url

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

https://d3js.org/d3.geo.projection.v0.min.js

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