An updated version of https://gist.github.com/jczaplew/6453048 or /jczaplew/6453048 using the logic from this example http://mbostock.github.io/d3/talk/20111018/azimuthal.html
xxxxxxxxxx
<meta charset="utf-8">
<style>
body {
background: #fcfcfa;
height: 500px;
position: relative;
width: 960px;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: #fff;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
.land {
fill: #222;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500,
rotate = [0,0],
graticule = d3.geo.graticule();
var projection = d3.geo.azimuthalEqualArea()
.scale(250)
.precision(0.3)
.clipAngle(180 - 1e-3)
.rotate(rotate);
var path = d3.geo.path()
.projection(projection);
var m0,
o0;
var drag = d3.behavior.drag()
.on("dragstart", function() {
// Adapted from https://mbostock.github.io/d3/talk/20111018/azimuthal.html and updated for d3 v3
var proj = projection.rotate();
m0 = [d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY];
o0 = [-proj[0],-proj[1]];
})
.on("drag", function() {
if (m0) {
var m1 = [d3.event.sourceEvent.pageX, d3.event.sourceEvent.pageY],
o1 = [o0[0] + (m0[0] - m1[0]) / 4, o0[1] + (m1[1] - m0[1]) / 4];
projection.rotate([-o1[0], -o1[1]]);
}
// Update the map
path = d3.geo.path().projection(projection);
d3.selectAll("path").attr("d", path);
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(drag);
svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("plate0.json", function(error, plates) {
svg.insert("path", ".graticule")
.datum(topojson.feature(plates, plates.objects.plates0))
.attr("class", "land")
.attr("d", path);
});
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/topojson.v1.min.js