Skip to content

Instantly share code, notes, and snippets.

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/2974930 to your computer and use it in GitHub Desktop.
Orthographic Grid
license: gpl-3.0

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

Part 1 of 3.

  1. Orthographic Grid
  2. Orthographic Clipping
  3. Orthographic Shading
<!DOCTYPE html>
<meta charset="utf-8">
path {
fill: none;
stroke: #333;
circle {
stroke-width: 2px;
<script src="//"></script>
var width = 960,
height = 500;
var rotate = [-71.03, 42.37],
velocity = [.018, .006];
var projection = d3.geo.orthographic()
var path = d3.geo.path()
var graticule = d3.geo.graticule();
var svg ="body").append("svg")
.attr("width", width)
.attr("height", height);
var feature = svg.append("path")
.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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment