説明
地球をリアルタイムに回転させるにはD3.jsに用意されているd3.time()メソッドとprojectionオブジェクトのrotate()メソッドを使って行います。d.timer()メソッドの最初のパラメーターに定期的に呼び出す関数を指定します。2番目のパラメーターには呼び出し間隔を指定します。
d3.timer()メソッドの最初のパラメーターに指定する関数内でprojectionオブジェクトのrotate()メソッドに回転角度を指定します。rotate()メソッドのパラメーターは[縦軸の回転角度, 横軸の回転角度]のように配列形式で指定します。
なお、地形データのサイズが多い場合、地形が表示されるまでに数秒かかることがある上に、SVG描画で回転させているため実際に期待する速度で回転しないことがあります。より、高速に描画するには地図をSVGでなくcanvasに秒下（投影）する必要があります。
これ以外の説明に関しては
こちらのページを参照してください。
HTMLソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<style>
svg {
border: 1px solid black;
}
.stroke { /* 地球の外枠線 */
fill: none;
stroke: #f00;
stroke-width: 3px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="myEarth"></div>
<script src="js/sample.js"></script>
</body>
</html>
JavaScriptコード
var width = 480; // SVG領域の横幅
var height = 480; // SVG領域の縦幅
var degree = 220; // 地球の回転角度
var earth = d3.geo.orthographic() // 投影方法を指定
.translate([width / 2, height /2]) // 表示位置を調整
.clipAngle(90) // クリップ範囲を指定
.scale(200) // スケールを指定
.rotate([degree, -25]) // 角度を指定
var path = d3.geo.path() // パスと投影方法を設定
.projection(earth)
// SVG領域のサイズを指定
var svg = d3.select("#myEarth").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")
// 地球のデータを読み込む
d3.json("data/world-50m.json", function(error, world) {
var earthPath = svg.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects.land))
.attr("d", path); // 地形のデータを設定
// タイマーを使って0.5秒ごとに地球を回転させる
d3.timer(function(){
earth.rotate([degree, -25]); // 角度を設定
degree = degree + 2; //
earthPath.attr("d", path); // 地形のデータを設定
}, 500);
});