index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
margin: 0px;
padding: 0px;
}
</style>
<body>
<svg width="960" height="500">
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="960" height="500">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#fff" result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
</filter>
</defs>
<rect x="0" y="0" width="960" height="600" fill="#cccccc" />
</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 projection = d3.geo.orthographic()
.scale(245)
.rotate([0,0,0])
.translate([w / 2, h / 2])
.clipAngle(90);
var path = d3.geo.path().projection(projection);
d3.json("https://gist.githubusercontent.com/shimizu/97c156f7f9137586f784/raw/4be1053346fa88d448c2290c49689634c8102b0a/Landmasses.geojson", function(geojson){
var stage = svg.append("svg:g").attr("filter", "url(#MyFilter)");
var map = stage.append("svg:path")
.attr({
"d":function(){ return path(geojson)},
"fill":"none",
"stroke-width":6,
"stroke":"white",
});
var m0, o0;
var update = function(){
map.attr("d", function(){ return path(geojson)});
}
var mousedown = function () {
m0 = [d3.event.pageX, d3.event.pageY];
o0 = projection.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];
projection.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>