| license: gpl-3.0 |
The above grid demonstrates an orthographic azimuthal projection. The lines are at uniform 10º increments of latitude and longitude.
Part 2 of 3.
To see this technique applied to real geographic features, see the Spinny Globe example.
forked from mbostock's block: Orthographic Clipping
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| circle, | |
| path { | |
| fill: none; | |
| stroke: #333; | |
| stroke-width: 1; | |
| } | |
| circle { | |
| stroke-width: 2px; | |
| fill: cornflowerblue; | |
| } | |
| .world { | |
| fill: orange; | |
| } | |
| </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); | |
| svg.append("circle") | |
| .attr("cx", width / 2) | |
| .attr("cy", height / 2) | |
| .attr("r", 240); | |
| var feature = svg.append("path") | |
| .datum(graticule); | |
| var url = "http://enjalot.github.io/wwsd/data/world/world-110m.geojson"; | |
| var world; | |
| d3.json(url, function(error, data) { | |
| if (error) throw error; | |
| world = svg.append("path") | |
| .attr('class', 'world'); | |
| d3.timer(function(elapsed) { | |
| projection.rotate( | |
| [rotate[0] + elapsed * velocity[0], | |
| rotate[1] + elapsed * velocity[1]] | |
| ); | |
| feature.attr("d", path); | |
| world.attr("d", path(data)); | |
| }); | |
| }) | |
| </script> |