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
xxxxxxxxxx
<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 url = "https://enjalot.github.io/wwsd/data/world/world-110m.geojson"
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);
d3.json(url, function(err, geojson) {
var outlines = svg.append("path")
.attr("d", path(geojson))
d3.timer(function(elapsed) {
projection.rotate([rotate[0] + elapsed * velocity[0], rotate[1] + elapsed * velocity[1]]);
feature.attr("d", path);
outlines.attr("d", path(geojson));
});
})
svg.append("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 240);
</script>
https://d3js.org/d3.v3.min.js