Skip to content

Instantly share code, notes, and snippets.

@mbostock
Forked from mbostock/.block
Last active December 20, 2022 03:31
Show Gist options
  • Save mbostock/3031319 to your computer and use it in GitHub Desktop.
Save mbostock/3031319 to your computer and use it in GitHub Desktop.
Orthographic Shading
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 3 of 3.

  1. Orthographic Grid
  2. Orthographic Clipping
  3. Orthographic Shading
<!DOCTYPE html>
<meta charset="utf-8">
<style>
circle,
path {
fill: none;
stroke: #123;
stroke-opacity: .5;
}
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 gradient = svg.append("defs").append("radialGradient")
.attr("id", "gradient")
.attr("cx", "75%")
.attr("cy", "25%");
gradient.append("stop")
.attr("offset", "5%")
.attr("stop-color", "#ffd");
gradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", "#ba9");
var fill = svg.append("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 240)
.style("fill", "url(#gradient)");
var feature = svg.append("path")
.datum(graticule);
d3.timer(function(elapsed) {
projection.rotate([rotate[0] + elapsed * velocity[0], rotate[1] + elapsed * velocity[1]]);
fill.attr("transform", "rotate(" + (rotate[0] + elapsed * velocity[0]) + " " + width / 2 + "," + height / 2 + ")");
feature.attr("d", path);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment