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)"
});
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>