Rectangular projection domain to zoom in Plot.geo charts

[dumaron]

I'm trying to implement a sort of static "zoom" on a Plot.geo based chart. What I'm trying to achieve is really similar to the Spherical line with varying stroke, but I'd like to zoom in on specific areas of the planet (no interaction needed).

I've made a few attempts reusing the Projection domain example by trying to obtain a "bounding-box" approach instead of a circle, but without luck so far. This goes down to my inexperience with D3: a few alternative domains are available, but I haven't been able to make them work. I've also found little or no demo about that on internet.

What could be a good way to achieve the "zoom" effect?

[Fil]

Does this example help?

[dumaron]

Yes and no @Fil . This is a good way to zoom into specific countries, like China in the example. What I'm looking for is for the ability to zoom into frames defined by specific lat/lon coordinates.
Maybe I can fake a GeoJSON polygon (China in the example is a MultyPoligon) that fakes the coordinates of the frame I want to zoom into?

[Fil]

By “coordinates” you mean a singular point? Plot’s projection domain wants something that spans a certain width, otherwise, if given only one point, it would zoom “infinitely”. In other words the domain must contains at least two points—whether they are given as a MultiPoint, LineString, Polygon etc has no importance.

[dumaron]

You're right, I should have used the term "pair of coordinates"; the idea is that given two points I can use them to define a frame, using them as bottom-left/top-right angles (actually the order is not important). In this way, it would be possible for me to zoom in on arbitrary zones in the map that do not correspond to specific countries, but that are interesting for me.

The idea si similar to the one in the image, where I'd like to be able to show only what is inside one of those red triangles in the image.

[Fil]

Perfect: you can use a MultiPoint and specify two points (diagonal) or four points (the four corners of the "rectangle"—I'm using quotes because there are no rectangles on a sphere).

[dumaron]

Thanks @Fil ! From your suggestion, I've been able to achieve the desired result in this fork of the projection demo. It's easy to spot the "rectangle" projected on a globe.

A side question: in the original example the demo used d3.circle, and as far as I can see d3.equirectangular exists too. Is this the right way to achieve rectangular-looking shapes on an equirectangular projection?

[Fil]

D3 only does great circle (spherical) line interpolation. For approximate equirectangular line interpolation, insert more control points on the parallels:

steps = (a, b) => d3.quantize(((i) => t => [...i(t)])(d3.interpolate(a, b)), 11)

domain = ({
  type: "Polygon",
  coordinates: [
    [[0, 0], ...steps([0, radius], [radius, radius]), ...steps([radius, 0], [0, 0])]
  ]
})

However if you just want to use the domain (vs. display it as a "rectangle"), you can just use a MultiPoint with coordinates [[0,0], [radius, radius]].