Given latitude and longitude, plotting points on D3 geo projection

Question

I'm learning a bit about D3, and one of the examples I've been working through is a geographic projection (orthographic). I realize there are a number of questions about topics very similar to this, but none of them helped me understand how to plot points correctly using a projection (some of them demonstrated translations, but it doesn't seem like the same thing to me).

Here's the code:

var width = 960,
    height = 500;

var projection = d3.geo.orthographic()
    .scale(248)
    .clipAngle(90);

var path = d3.geo.path()
    .projection(projection);

var graticule = d3.geo.graticule()
    .extent([[-180, -90], [180 - .1, 90 - .1]]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var line = svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

d3.json("readme-world-110m.json", function(error, world) {
    var countries = topojson.feature(world, world.objects.countries).features;
        i = -1,
        n = countries.length;

    var country = svg.selectAll(".country")
      .data(countries)
      .enter().insert("path", ".graticule")
      .attr("class", "country")
      .attr("d", path);

    var allPoints = [];
    for (var lat = -90; lat < 90; lat=lat+10) {
      for (var lon = -180; lon < 180; lon=lon+10) {
          allPoints.push(projection([lat, lon]));
      }
    }

    var intersections = svg.selectAll('.gridpoints')
            .data(allPoints)
          .enter().append('circle', '.gridpoints')
            .attr('cy', d => d[0])
            .attr('cx', d => d[1])
            .attr('r', 5);
});

The idea was simply to plot a circle on all the graticule intersections. While the projection and line/country paths rendered just like I would expect (because they came right out of an example), I'm a little lost on the circles I'm trying to draw. Here's the result:

As you can see, the circles seem to be positioned correctly with respect to each other, but they seem to be rotated counter-clockwise about -90 degrees, and I don't understand why. Can someone tell me what I'm doing wrong?

Answer 1

Simple mistake -- the projection takes the arguments in reverse order to what you've specified :

Returns an array [x, y] given the input array [longitude, latitude].