D3 Examples - Projection Transitions

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  background: #fcfcfa;
  height: 500px;
  position: relative;
  width: 960px;
}
​
#projection-menu {
  position: absolute;
  right: 10px;
  top: 10px;
}
​
.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}
​
.fill {
  fill: #fff;
}
​
.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}
​
.land {
  fill: #222;
}
​
.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}
​
</style>
​
<div></div>
<script src="d3.v3.min.js"></script>
<script src="d3.geo.projection.v0.min.js"></script>
<script src="topojson.v1.min.js"></script>
<script>
​
var width = 960,
    height = 500;
​
var option = {name: "Lagrange", projection: d3.geo.lagrange().scale(120).rotate([0, 0]).center([0, 0])};
​
var interval = setInterval(loop, 1500),
    i = 0;
​
var projection = option.projection;
​
var path = d3.geo.path()
    .projection(projection);
​
var graticule = d3.geo.graticule();
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);
​
svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");
​
svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");
​
svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);
​
var countries
​
d3.json("world-topo.json", function(error, world) {
  if (error) throw error;
​
  countries = svg.selectAll(".country")   // select country objects (which don't exist yet)
    .data(topojson.feature(world, world.objects.countries).features)  // bind data to these non-existent objects
    .enter().append("path") // prepare data to be appended to paths
    .attr("class", "country") // give them a class for styling and access later
    .attr("id", function(d) { return "code_" + d.properties.id; }, true)  // give each a unique id for access later
    .attr("d", path) // create them using the svg path generator defined above
    .style("fill", () => `hsl(${Math.random() * 360},50%,50%)`);
​
});
​
​
function loop() {
  update();
}
​
function update(option) {
  // console.log('update', option, svg)
  countries.transition()
    .duration(1000)
    .style("fill", () => `hsl(${Math.random() * 360},50%,50%)`);
}
​
function projectionTween(projection0, projection1) {
  return function(d) {
    var t = 0;
​
    var projection = d3.geo.projection(project)
        .scale(1)
        .translate([width / 2, height / 2]);
​
    var path = d3.geo.path()
        .projection(projection);
​
    function project(λ, φ) {
      λ *= 180 / Math.PI, φ *= 180 / Math.PI;
      var p0 = projection0([λ, φ]), p1 = projection1([λ, φ]);
      return [(1 - t) * p0[0] + t * p1[0], (1 - t) * -p0[1] + t * -p1[1]];
    }
​
    return function(_) {
      t = _;
      return path(d);
    };
  };
}
​
</script>
​
    