The above grid demonstrates an orthographic azimuthal projection. The lines are at uniform 10º increments of latitude and longitude.
Part 3 of 3.
- Orthographic Grid
- Orthographic Clipping
- Orthographic Shading
-
-
Save mbostock/3031319 to your computer and use it in GitHub Desktop.
Orthographic Shading
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 | |
| redirect: https://observablehq.com/@d3/orthographic-shading |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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