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>-->
<canvas id="map" width="1000" height="1000" style="width: 100%; height: 100%"></canvas>

<script src="http://d3js.org/d3.v3.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 context = root.node().getContext('2d');

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)
  .context(context);

var cachepaths = null;
var world = null;

function render() {
     context.clearRect(0, 0, 1000, 1000);

    context.beginPath();
    path(graticule());
    context.stroke();

    if (world) {
      context.beginPath();
      path(topojson.feature(world, world.objects.land))
      context.fill();
    }
}

var zoom = d3.geo.zoom()
  .projection(projection)
  .on('zoom.redraw', function() {
    d3.event.sourceEvent.preventDefault();


   render();
  });

root.call(zoom);

d3.json("/d/4090846/world-110m.json", function (error, lworld) {
 world = lworld;
 render();
});


</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>-->
	<canvas id="map" width="1000" height="1000" style="width: 100%; height: 100%"></canvas>

	<script src="http://d3js.org/d3.v3.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 context = root.node().getContext('2d');

	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)
	.context(context);

	var cachepaths = null;
	var world = null;

	function render() {
	context.clearRect(0, 0, 1000, 1000);

	context.beginPath();
	path(graticule());
	context.stroke();

	if (world) {
	context.beginPath();
	path(topojson.feature(world, world.objects.land))
	context.fill();
	}
	}

	var zoom = d3.geo.zoom()
	.projection(projection)
	.on('zoom.redraw', function() {
	d3.event.sourceEvent.preventDefault();


	render();
	});

	root.call(zoom);

	d3.json("/d/4090846/world-110m.json", function (error, lworld) {
	world = lworld;
	render();
	});



	</script>