D3 Examples - Rotating Transverse Mercator

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="960"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@2"></script>
<script>
​
var width = 960,
    height = 960,
    speed = 1e-2;
​
var projection = d3.geoTransverseMercator()
    .scale((width + 1) / 2 / Math.PI)
    .translate([width / 2, height / 2])
    .precision(0.5);
​
var canvas = d3.select("canvas"),
    context = canvas.node().getContext("2d"),
    path = d3.geoPath(projection, context);
​
d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, topo) {
  if (error) throw error;
​
  var graticule = d3.geoGraticule10(),
      land = topojson.feature(topo, topo.objects.land),
      borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; });
​
  d3.timer(function(elapsed) {
    projection.rotate([speed * elapsed, 0]);
​
    context.clearRect(0, 0, width, height);
​
    context.beginPath();
    path(land);
    context.fillStyle = "#222";
    context.fill();
​
    context.beginPath();
    path(borders);
    context.lineWidth = 0.5;
    context.strokeStyle = "#fff";
    context.stroke();
​
    context.beginPath();
    path(graticule);
    context.lineWidth = 0.5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();
  });
});
​
</script>
​
    