Skip to content

Instantly share code, notes, and snippets.

@mbostock
Forked from mbostock/.block
Last active December 20, 2022 03:31
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mbostock/3021474 to your computer and use it in GitHub Desktop.
Orthographic Clipping
license: gpl-3.0
redirect: https://observablehq.com/@d3/orthographic-shading

The above grid demonstrates an orthographic azimuthal projection. The lines are at uniform 10º increments of latitude and longitude.

Part 2 of 3.

  1. Orthographic Grid
  2. Orthographic Clipping
  3. Orthographic Shading

To see this technique applied to real geographic features, see the Spinny Globe example.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
circle,
path {
fill: none;
stroke: #333;
}
circle {
stroke-width: 2px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var rotate = [-71.03, 42.37],
velocity = [.018, .006];
var projection = d3.geo.orthographic()
.scale(240)
.clipAngle(90);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var feature = svg.append("path")
.datum(graticule);
svg.append("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 240);
d3.timer(function(elapsed) {
projection.rotate([rotate[0] + elapsed * velocity[0], rotate[1] + elapsed * velocity[1]]);
feature.attr("d", path);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment