Use the dials on the left to adjust the rotation of a geographic projection. D3 supports three-axis rotation, allowing you to adjust the lambda (λ), phi (φ) and gamma (γ) axes.
This map uses an orthographic projection with D3.js and Topojson to draw a map of the world’s countries onto a globe, rendered here with a graticule that is 10° by 10°.
The world countries polygons were downloaded from ArcGIS.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Helvetica Neue", sans-serif;
margin: 0;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
var width = window.innerWidth, height = window.innerHeight;
var projection = d3.geoOrthographic()
.scale(width / 4.1)
.translate([width / 2, height / 2])
.clipAngle(90 + 1e-6)
.precision(1)
.rotate([0, 0]);
var path = d3.geoPath()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
var graticule = d3.geoGraticule()
.step([10, 10]);
g.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path)
.style("fill", "#fff")
.style("stroke", "#ccc");
var dials = [{
name: "λ",
scale: d3.scaleLinear().domain([40, height / 2 - 40]).range([-180, 180]),
rscale: d3.scaleLinear().domain([-180, 180]).range([40, height / 2 - 40])
},{
name: "φ",
scale: d3.scaleLinear().domain([40, height / 2 - 40]).range([90, -90]),
rscale: d3.scaleLinear().domain([90, -90]).range([40, height / 2 - 40])
},{
name: "γ",
scale: d3.scaleLinear().domain([40, height / 2 - 40]).range([180, -180]),
rscale: d3.scaleLinear().domain([180, -180]).range([40, height / 2 - 40])
}];
svg.selectAll(".dial-rect")
.data(dials)
.enter().append("rect")
.attr("class", "dial-rect")
.attr("x", function(d,i){ return 45 * (i + 1); })
.attr("y", 40)
.attr("width", 20)
.attr("height", height / 2 - 80)
.attr("rx", 10)
.attr("ry", 10)
.style("stroke", "#ccc")
.style("fill", "#3a403d");
svg.selectAll(".dial-text")
.data(dials)
.enter().append("text")
.attr("class", "dial-text")
.attr("x", function(d,i) { return 45 * (i + 1); })
.attr("y", 15)
.attr("dx", 10)
.attr("text-anchor", "middle")
.style("fill", "#3a403d")
.text(function(d){ return d.name; });
svg.selectAll(".dial-circle")
.data(dials)
.enter().append("circle")
.attr("class", function(d){ return "dial-circle dial-" + d.name; })
.attr("cx", function(d,i){ return 45 * (i + 1) + 10; })
.attr("cy", function(d){ return d.rscale(0); })
.attr("r", 20)
.style("stroke", "#aaa")
.style("fill", "#ccc")
.style("cursor", "ns-resize")
.call(d3.drag().on("drag", dragged));
svg.selectAll(".dial-circle-text")
.data(dials)
.enter().append("text")
.attr("class", function(d) { return "dial-circle-text dial-" + d.name; })
.attr("x", function(d,i){ return 45 * (i + 1) + 10; })
.attr("y", function(d){ return d.rscale(0) + 5; })
.attr("text-anchor", "middle")
.style("font-size", ".7em")
.style("cursor", "ns-resize")
.text("0")
.call(d3.drag().on("drag", dragged));
function dragged(d){
var y = d3.mouse(this)[1];
y < 40 ? y = 40 : y = y;
y > height / 2 - 40 ? y = height / 2 - 40 : y = y;
d3.select(".dial-circle.dial-" + d.name)
.attr("cy", y);
d3.select(".dial-circle-text.dial-" + d.name)
.attr("y", y + 5)
.text(Math.round(d.scale(y)));
projection.rotate([dials[0].scale(d3.select(".dial-λ").attr("cy")), dials[1].scale(d3.select(".dial-φ").attr("cy")), dials[2].scale(d3.select(".dial-γ").attr("cy"))])
g.selectAll("path").attr("d", path);
}
var c = d3.scaleOrdinal(d3.schemeCategory20);
d3.json("countries.json", function(error, data){
g.selectAll(".subunit")
.data(topojson.feature(data, data.objects.polygons).features)
.enter().append("path")
.attr("class", "subunit")
.attr("d", path)
.style("stroke", "#fff")
.style("stroke-width", "1px")
.style("fill", function(d,i){ return c(i); })
.style("opacity", ".6");
});
</script>
</body>
</html>