world tour

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {

background: radial-gradient(720px at 490px, #081f2b 0%, #061616 100%);
    height: 960px;
  
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<script>

var width = 960,
    height = 960,
    speed = 1e-2,
    start = Date.now();

var sphere = {type: "Sphere"};

var projection = d3.geoStereographic()
    .scale(width / 2.2)
    .clipAngle(90)
    .translate([width / 2, height / 2])
    .precision(.5);

var graticule = d3.geoGraticule();

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

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

var path = d3.geoPath()
    .projection(projection)
    .context(context);

d3.queue()
    .defer(d3.json, "oceans.json")
    .defer(d3.json, "lands.json")
    .defer(d3.json, "lake.json")
    .defer(d3.json, "river.json")
    .defer(d3.json, "coast.json")
    .defer(d3.json, "glaciate.json")
    .await(ready)

function ready(error, oceans, lands , lake, river, coast, glaciate) {
  if (error) throw error;

var ocean = topojson.feature(oceans, oceans.objects.oceans),
      land = topojson.feature(lands, lands.objects.land)
      lake = topojson.feature(lake, lake.objects.lakes)
      river = topojson.feature(river, river.objects.rivers)
      coast = topojson.feature(coast, coast.objects.coastline)
      glaciate = topojson.feature(glaciate, glaciate.objects.glaciated)
      grid = graticule();

d3.timer(function() {
    projection.rotate([speed * (Date.now() - start), -15]);

context.clearRect(0, 0, width, height);

context.beginPath();
    path(sphere);
    context.fillStyle = "#fff";
    context.fill();

context.beginPath();
    path(grid);
    context.lineWidth = .5;
    context.strokeStyle = "#ddd";
    context.stroke();

context.beginPath();
    path(ocean);
    context.fillStyle = "rgba(70,130,180,.5)";
    context.fill();

context.beginPath();
    path(land);
    context.fillStyle = "#FBB448";
    context.fill();

context.beginPath();
    path(lake);
    context.fillStyle = "rgba(70,130,180,.5)";
    context.fill();

context.beginPath();
    path(glaciate);
    context.lineWidth = .5;
    context.strokeStyle = "white";
    context.stroke();

context.beginPath();
    path(coast);
    context.lineWidth = .5;
    context.strokeStyle = "steelblue";
    context.stroke();

context.beginPath();
    path(river);
    context.lineWidth = .5;
    context.strokeStyle = "steelblue";
    context.stroke();

context.beginPath();
    path(sphere);
    context.lineWidth = .5;
    context.strokeStyle = "#000";
    context.stroke();

});

d3.select(self.frameElement).style("height", height + "px");

}
</script>

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

https://d3js.org/d3-array.v1.min.js

https://d3js.org/d3-timer.v1.min.js

https://d3js.org/d3-geo.v1.min.js

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

https://d3js.org/d3-geo-projection.v1.min.js