daf/index.html

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

path {
  fill: none;
  stroke-linejoin: round;
}

.sphere,
.graticule {
  stroke: #aaa;
}

#geo {
  fill: blue;
}

</style>
<body>
<svg id="map" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice"></svg>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://d3js.org/queue.v1.min.js" /></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script type="text/javascript" src="http://www.jasondavies.com/maps/rotate/d3.geo.zoom.js" /></script>
<script>

var root = d3.select('#map');

var projection = d3.geo.orthographic()
  .scale((1 << 12) / 2 / Math.PI)
  .translate([500, 500])
  .clipAngle(90)
  .rotate([100, -45]);

var graticule = d3.geo.graticule();

var vector = root.append('path')
  .attr('id', 'geo');

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

var cachepaths = null;

var zoom = d3.geo.zoom()
  .projection(projection)
  .on('zoom.redraw', function() {
    d3.event.sourceEvent.preventDefault();
    cachepaths.attr("d", path);
    vector.attr("d", path);
  });

root.call(zoom);

root.append("path")
 .datum(graticule)
 .attr("class", "graticule")
 .attr("d", path);


d3.json("/d/4090846/world-110m.json", function (error, world) {
  vector
    .datum(topojson.feature(world, world.objects.land))
    .attr('d', path);

  cachepaths = root.selectAll('path');
});


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

	path {
	fill: none;
	stroke-linejoin: round;
	}

	.sphere,
	.graticule {
	stroke: #aaa;
	}

	#geo {
	fill: blue;
	}

	</style>
	<body>
	<svg id="map" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice"></svg>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="http://d3js.org/queue.v1.min.js" /></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script type="text/javascript" src="http://www.jasondavies.com/maps/rotate/d3.geo.zoom.js" /></script>
	<script>

	var root = d3.select('#map');

	var projection = d3.geo.orthographic()
	.scale((1 << 12) / 2 / Math.PI)
	.translate([500, 500])
	.clipAngle(90)
	.rotate([100, -45]);

	var graticule = d3.geo.graticule();

	var vector = root.append('path')
	.attr('id', 'geo');

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

	var cachepaths = null;

	var zoom = d3.geo.zoom()
	.projection(projection)
	.on('zoom.redraw', function() {
	d3.event.sourceEvent.preventDefault();
	cachepaths.attr("d", path);
	vector.attr("d", path);
	});

	root.call(zoom);

	root.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);


	d3.json("/d/4090846/world-110m.json", function (error, world) {
	vector
	.datum(topojson.feature(world, world.objects.land))
	.attr('d', path);

	cachepaths = root.selectAll('path');
	});



	</script>