index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zoom and Rotating (Reprojecting)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>
<style>
body {
margin: 0;
}
</style>
<div id="map-container">
<canvas id='container'></canvas>
</div>
<script>
var width = 960,
height = 480,
speed = 1e-2;
var div = d3.select('#map-container'),
canvas = div.select('canvas#container'),
context = canvas.node().getContext("2d");
canvas
.attr('width', width)
.attr('height', height);
var projection = d3.geo.orthographic()
.scale(height / 2)
.clipAngle(90)
.translate([width / 2, height / 2])
.precision(0.1);
var pathGenerator = d3.geo.path()
.projection(projection)
.context(context);
var graticule = d3.geo.graticule();
d3.json('land.geojson', function(err, data) {
if (err) { throw err; }
context.fillStyle = '#ddd';
context.fillRect(0, 0, width, height);
d3.timer(function(elapsed) {
projection.rotate([speed * elapsed, 30, 15]);
context.clearRect(0, 0, width, height);
context.beginPath();
pathGenerator({type: 'Sphere'});
context.strokeStyle = "#666";
context.stroke();
context.fillStyle = '#eee';
context.fill();
context.beginPath();
pathGenerator(graticule());
context.strokeStyle = "#666";
context.stroke();
context.beginPath();
pathGenerator(data);
context.fillStyle = "#999";
context.fill();
});
});
</script>
</body>
</html>