shimizu/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
	margin: 0px;
	padding: 0px;
}
</style>

<body>
<svg>
<defs>
	<filter id="drop-shadow" width="150%" height="150%">
		<feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="2"></feGaussianBlur>
		<feOffset result="offsetBlur" dx="4" dy="4"></feOffset><feBlend in="SourceGraphic" in2="offsetBlur" mode="normal"></feBlend>
	</filter>
</defs>

</svg>


<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>

<script>

(function(){
	"use strict";

	var w = 960;
	var h = 500;

    var svg = d3.select("svg").attr("width", w).attr("height", h);

    var projection90 = d3.geo.orthographic()
        .scale(245)
        .rotate([0,0,0])
		.translate([w / 2, h / 2])
        .clipAngle(90);

    var projection180 = d3.geo.orthographic()
        .scale(245)
        .rotate([0,0,0])
		.translate([w / 2, h / 2])
        .clipAngle(180);


    var frontPath = d3.geo.path().projection(projection90);
    var backPath = d3.geo.path().projection(projection180);

    d3.json("https://gist.githubusercontent.com/shimizu/97c156f7f9137586f784/raw/4be1053346fa88d448c2290c49689634c8102b0a/Landmasses.geojson", function(geojson){


		var stage = svg.append("svg:g");


		var backMap = stage.append("svg:path")
			.attr({
			"d":function(){ return backPath(geojson)},
				"fill-opacity":1,
				"fill":"gray",
				"stroke":"none",
			});

		var frontMap = stage.append("svg:path")
			.attr({
			"d":function(){ return frontPath(geojson)},
				"fill-opacity":1,
				"fill":"blue",
				"stroke":"none",
				"filter": "url(#drop-shadow)"
			});

		// Reference from http://bl.ocks.org/mbostock/6738360
		var m0, o0;
		var update = function(){
				backMap.attr("d", function(){ return backPath(geojson)});
				frontMap.attr("d", function(){ return frontPath(geojson)});
		}
		var 	mousedown = function () {
			m0 = [d3.event.pageX, d3.event.pageY];
			o0 = projection90.rotate();
			d3.event.preventDefault();
		}
		var mousemove = function () {
		  if (m0) {
			var m1 = [d3.event.pageX, d3.event.pageY];
			var o1 = [o0[0] + (m1[0] - m0[0]) / 6, o0[1] + (m0[1] - m1[1]) / 6];
			o1[1] = o1[1] > 30  ? 30  :
					o1[1] < -30 ? -30 :
					o1[1];
			projection90.rotate(o1);
			projection180.rotate(o1);
			update();
		  }
		}
		var mouseup = function () {
			if (m0) {
				mousemove();
				m0 = null;
			}
		}


		d3.select(window)
			.on("mousemove", mousemove)
			.on("mouseup", mouseup);

		svg.on("mousedown", mousedown);

    });

})();
</script>


## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	html, body {
	margin: 0px;
	padding: 0px;
	}
	</style>

	<body>
	<svg>
	<defs>
	<filter id="drop-shadow" width="150%" height="150%">
	<feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="2"></feGaussianBlur>
	<feOffset result="offsetBlur" dx="4" dy="4"></feOffset><feBlend in="SourceGraphic" in2="offsetBlur" mode="normal"></feBlend>
	</filter>
	</defs>

	</svg>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>

	<script>

	(function(){
	"use strict";

	var w = 960;
	var h = 500;

	var svg = d3.select("svg").attr("width", w).attr("height", h);

	var projection90 = d3.geo.orthographic()
	.scale(245)
	.rotate([0,0,0])
	.translate([w / 2, h / 2])
	.clipAngle(90);

	var projection180 = d3.geo.orthographic()
	.scale(245)
	.rotate([0,0,0])
	.translate([w / 2, h / 2])
	.clipAngle(180);


	var frontPath = d3.geo.path().projection(projection90);
	var backPath = d3.geo.path().projection(projection180);

	d3.json("https://gist.githubusercontent.com/shimizu/97c156f7f9137586f784/raw/4be1053346fa88d448c2290c49689634c8102b0a/Landmasses.geojson", function(geojson){


	var stage = svg.append("svg:g");


	var backMap = stage.append("svg:path")
	.attr({
	"d":function(){ return backPath(geojson)},
	"fill-opacity":1,
	"fill":"gray",
	"stroke":"none",
	});

	var frontMap = stage.append("svg:path")
	.attr({
	"d":function(){ return frontPath(geojson)},
	"fill-opacity":1,
	"fill":"blue",
	"stroke":"none",
	"filter": "url(#drop-shadow)"
	});

	// Reference from http://bl.ocks.org/mbostock/6738360
	var m0, o0;
	var update = function(){
	backMap.attr("d", function(){ return backPath(geojson)});
	frontMap.attr("d", function(){ return frontPath(geojson)});
	}
	var mousedown = function () {
	m0 = [d3.event.pageX, d3.event.pageY];
	o0 = projection90.rotate();
	d3.event.preventDefault();
	}
	var mousemove = function () {
	if (m0) {
	var m1 = [d3.event.pageX, d3.event.pageY];
	var o1 = [o0[0] + (m1[0] - m0[0]) / 6, o0[1] + (m0[1] - m1[1]) / 6];
	o1[1] = o1[1] > 30 ? 30 :
	o1[1] < -30 ? -30 :
	o1[1];
	projection90.rotate(o1);
	projection180.rotate(o1);
	update();
	}
	}
	var mouseup = function () {
	if (m0) {
	mousemove();
	m0 = null;
	}
	}


	d3.select(window)
	.on("mousemove", mousemove)
	.on("mouseup", mouseup);

	svg.on("mousedown", mousedown);

	});

	})();
	</script>