Skip to content

Instantly share code, notes, and snippets.

@mbostock mbostock/.block
Last active Feb 24, 2018

What would you like to do?
Three-Axis Rotation
license: gpl-3.0

D3 3.0 supports three-axis rotation for geographic projections. This example demonstrates rotating lambda (λ), phi (φ) and gamma (γ) in three side-by-side orthographic projections.

<!DOCTYPE html>
<meta charset="utf-8">
.title {
display: inline-block;
font-size: 48px;
line-height: 90px;
text-align: center;
<script src=""></script>
<script src=""></script>
var diameter = 960 / 3,
radius = diameter / 2,
velocity = 0.01;
var projection = d3.geoOrthographic()
.scale(radius - 2)
.translate([radius, radius])
.data(["λ", "φ", "γ"])
.attr("class", "title")
.style("width", diameter + "px")
.text(function(d) { return d; });
var canvas ="body").selectAll("canvas")
.datum(function() { return this.getContext("2d"); })
.attr("width", diameter)
.attr("height", diameter);
var path = d3.geoPath()
d3.json("/mbostock/raw/4090846/world-110m.json", function(error, world) {
if (error) throw error;
var land = topojson.feature(world,,
globe = {type: "Sphere"};
d3.timer(function(elapsed) {
var angle = velocity * elapsed;
canvas.each(function(context, i) {
var rotate = [0, 0, 0];
rotate[i] = angle, projection.rotate(rotate);
context.clearRect(0, 0, diameter, diameter);
context.beginPath(), path.context(context)(land), context.fill();
context.beginPath(), path(globe), context.stroke();

This comment has been minimized.

Copy link

powersparks commented Jan 10, 2017

Thanks for writing this using version 4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.