Why doesn't my geo LineString follow latitude/graticule curves? - d3.js

Question

I'm trying to draw LineStrings that follow various latitude segments, however the built-in geodesic arc interpolation doesn't seem to be drawing arcs that follow latitude. My question is: why not and how do I achieve this?
Here is my result:
And my code:
const width = 500;
const height = 500;
const scale = 200;
const svg = d3.select('svg').attr("viewBox", [0, 0, width, height]);
const projection = d3.geoStereographic().rotate([0, -90]).precision(0.1).clipAngle(90.01).scale(scale).translate([width / 2, height / 2]);
const path = d3.geoPath(projection);
const graticule = d3.geoGraticule().stepMajor([15, 15]).stepMinor([0, 0])();
svg
.append("path")
.datum(graticule)
.attr("d", path)
.attr("fill", "none")
.attr("stroke", '#000000')
.attr("stroke-width", 0.3)
.attr("stroke-opacity", 1);
let curve = {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-180, 15],
[-90, 15]
]
}
}
svg
.append("path")
.datum(curve)
.attr("d", path)
.attr('fill-opacity', 0)
.attr('stroke', 'red')
.attr("stroke-width", 1)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
My fiddle: https://jsfiddle.net/jovrtn/komfxycz/

Answer 1

D3 is fairly unique when it comes to geographic data: it uses spherical math (which despite many benefits, does lead to some challenges). d3.geoPath samples a line segment between two points so that the path follows a great circle (the shortest path between two points on a globe). Parallels do not follow great circle distances, so your path does not follow the parallel.
The behavior you are looking for requires us to draw a line between two points of latitude longitude as though they were Carteisan, even though they are not, and then preserve the points along that line when applying the stereographic projection.
When using an cylindrical projection the solution is easy enough, don't sample between points on a line. This answer contains such a solution.
This doesn't help with a stereographic projection - the linked approach would just result in a straight line between the first point and end point instead of a curved line along the parallel.
A solution is to manually sample points between start and end as though the data were Cartesian, then treat them as 3D in order to project them with a stereographic projection. This results in a path that follows parallels where start and end have the same north/south value. How frequently you sample reduces/eliminates the effect of great circle distances when using d3.geoPath.
In my solution I'm going to use two d3 helper functions:
d3.geoDistance which measures the distance between two lat long pairs in radians.
d3.interpolate which creates an interpolation function between two values.
let sample = function(line) {
let a = line.geometry.coordinates[0]; // first point
let b = line.geometry.coordinates[1]; // end point
let distance = d3.geoDistance(a, b); // in radians
let precision = 1*Math.PI/180; // sample every degree.
let n = Math.ceil(distance/precision); // number of sample points
let interpolate = d3.interpolate(a,b) // create an interpolator
let points = []; // sampled points.
for(var i = 0; i <= n; i++) { // sample n+1 times
points.push([...interpolate(i/n)]); // interpolate a point
}
line.geometry.coordinates = points; // replace the points in the feature
}
The above assumes a line with two points/one segment, naturally if your lines are more complex than that you'll need to adjust this. It's intended just as a starting point.
And in action:
const width = 500;
const height = 500;
const scale = 200;
const svg = d3.select('svg').attr("viewBox", [0, 0, width, height]);
const projection = d3.geoStereographic().rotate([0, -90]).precision(0.1).clipAngle(90.01).scale(scale).translate([width / 2, height / 2]);
const path = d3.geoPath(projection);
const graticule = d3.geoGraticule().stepMajor([15, 15]).stepMinor([0, 0])();
svg
.append("path")
.datum(graticule)
.attr("d", path)
.attr("fill", "none")
.attr("stroke", '#000000')
.attr("stroke-width", 0.3)
.attr("stroke-opacity", 1);
let curve = {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-180, 15],
[-90, 15]
]
}
}
svg
.append("path")
.datum(curve)
.attr("d", path)
.attr('fill-opacity', 0)
.attr('stroke', 'red')
.attr("stroke-width", 1)
let sample = function(line) {
let a = line.geometry.coordinates[0];
let b = line.geometry.coordinates[1];
let distance = d3.geoDistance(a, b); // in radians
let precision = 5*Math.PI/180;
let n = Math.ceil(distance/precision);
let interpolate = d3.interpolate(a,b)
let points = [];
for(var i = 0; i <= n; i++) {
points.push([...interpolate(i/n)]);
}
line.geometry.coordinates = points;
}
sample(curve);
svg
.append("path")
.datum(curve)
.attr("d", path)
.attr('fill-opacity', 0)
.attr('stroke', 'blue')
.attr("stroke-width", 1)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>