Is it possible to use a projection and include graticule labels with plot.geo?

[eastcoasting]

Based on the docs I can't seem to find a method to add a projection (and zoom), with graticule labels—am I missing something obvious? Trying to force the axis labels also does not seem to work, but I might not understand the API well enough.

Plot.plot({
  projection: {
    type: "equal-earth",
    domain: d3.geoCircle().center([10, 50]).radius(15)(),
    inset: 2
  },
  marks: [Plot.graticule(), Plot.geo(land, { fill: "currentColor" })]
})

vs.

Plot.plot({
  // projection: {
  //   type: "equal-earth",
  //   domain: d3.geoCircle().center([10, 50]).radius(15)(),
  //   inset: 2
  // },
  marks: [Plot.graticule(), Plot.geo(land, { fill: "currentColor" })]
})

[Fil]

(I think you have the images reversed.)

Graticule labels is a difficult problem if you want to solve it "in general", as the choice of labels and placements depends a lot on the projection. (For a mildly complicated example see https://observablehq.com/@d3/graticule-labels-stereographic).

You have to make room for the labels, then select the values you want to display on each of the four sides, then display them in the best location — which often might not be a location on the sphere. https://observablehq.com/@fil/graticule-labels-2100

[eastcoasting]

This is great thank you. Was clear to follow your example and modify for my region. A quick follow-up do you know if it's possible to also add tick marks in a less hacky manner than using a hyphen and some more manual padding?

kenyaGraticuleTicks = ({ longAdj, latAdj }) => {
  return [
    Plot.text(d3.range(-180, 180, 4), {
      x: Plot.identity,
      y: longAdj,
      text: () => `-`,
      stroke: "white",
      fill: "black",
      dy: 22,
      rotate: 90,
      fontSize: 12
    }),
    Plot.text(d3.range(-90, 90, 2), {
      x: latAdj,
      y: Plot.identity,
      text: () => `-`,
      stroke: "white",
      fill: "black",
      textAnchor: "end",
      fontSize: 12,
      render: (index, scales, values, dimensions, context, next) => {
        const g = next(index, scales, values, dimensions, context);
        d3.select(g)
          .selectAll("text")
          .each(function (i) {
            this.removeAttribute("transform");
            this.setAttribute("x", "32");
            this.setAttribute("dy", "0.32em");
            this.setAttribute("y", values.y[i]);
          });
        return g;
      }
    })
  ];
}

[Fil]

I'm not sure there is a better way :)