abenrob/index.html

## index.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <style>

    body {
      background-color: white;
    }
	svg {
		border: 2px solid black;
		background-color: #a4bac7;
	}

	.land {
		fill: #d7c7ad;
		stroke: #766951;
	}

	.boundary {
		fill: none;
		stroke: #a5967e;
	}
	.graticule {
		fill: none;
		stroke: #fff;
		stroke-width: .5px;
	}

	.graticule :nth-child(2n) {
		stroke-dasharray: 2,2;
	}

  </style>

</head>

<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<script src="https://cdn.rawgit.com/abenrob/ab3de11f64071ddc4f68/raw/20a9a6de1e810df931ceb7706e6265c57be90cd9/worldtopo.js"></script>
	<script>
		var width = 960,
		    height = 480;

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

		var projection = d3.geo.equirectangular()
			.scale(153)
		    .translate([width/2,height/2])

		var path = d3.geo.path()
		    .projection(projection);

		svg.append("path")
			.datum(topojson.object(worldtopo, worldtopo.objects.land))
			.attr("class", "land")
			.attr("d", path);
		svg.append("path")
			.datum(topojson.mesh(worldtopo, worldtopo.objects.countries, function(a, b) { return a.id !== b.id; }))
			.attr("class", "boundary")
			.attr("d", path);

		var graticule = d3.geo.graticule();
		svg.append("g")
			.selectAll("path")
			.data(graticule.lines)
			.enter().append("path")
			.attr("d", path)
			.attr("class", "graticule");

		var lat = 0;
		setInterval(function(){
			lat = lat +.25
			projection.rotate([lat,0]);
			svg.selectAll(".land")
				.attr("d", path);
			svg.selectAll(".boundary")
				.attr("d", path);
			svg.selectAll(".graticule")
				.attr("d", path);
		},50);

	</script>
</body>
</html>
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<style>

	body {
	background-color: white;
	}
	svg {
	border: 2px solid black;
	background-color: #a4bac7;
	}

	.land {
	fill: #d7c7ad;
	stroke: #766951;
	}

	.boundary {
	fill: none;
	stroke: #a5967e;
	}
	.graticule {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}

	.graticule :nth-child(2n) {
	stroke-dasharray: 2,2;
	}

	</style>

	</head>

	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<script src="https://cdn.rawgit.com/abenrob/ab3de11f64071ddc4f68/raw/20a9a6de1e810df931ceb7706e6265c57be90cd9/worldtopo.js"></script>
	<script>
	var width = 960,
	height = 480;

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

	var projection = d3.geo.equirectangular()
	.scale(153)
	.translate([width/2,height/2])

	var path = d3.geo.path()
	.projection(projection);

	svg.append("path")
	.datum(topojson.object(worldtopo, worldtopo.objects.land))
	.attr("class", "land")
	.attr("d", path);
	svg.append("path")
	.datum(topojson.mesh(worldtopo, worldtopo.objects.countries, function(a, b) { return a.id !== b.id; }))
	.attr("class", "boundary")
	.attr("d", path);

	var graticule = d3.geo.graticule();
	svg.append("g")
	.selectAll("path")
	.data(graticule.lines)
	.enter().append("path")
	.attr("d", path)
	.attr("class", "graticule");

	var lat = 0;
	setInterval(function(){
	lat = lat +.25
	projection.rotate([lat,0]);
	svg.selectAll(".land")
	.attr("d", path);
	svg.selectAll(".boundary")
	.attr("d", path);
	svg.selectAll(".graticule")
	.attr("d", path);
	},50);

	</script>
	</body>
	</html>