Create a gist now

Instantly share code, notes, and snippets.

@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.

Show comment
Hide comment

powersparks Jan 10, 2017

Thanks for writing this using version 4.

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