Support for different projections?

[jaanli]

I am learning to use Plot and it's cool!

I am trying to change the "albers" projection in https://github.com/jaanli/jaan.li/blob/dd7c3ef57bfb4dc607ec01f60ba0d5abf7ada5b9/docs/components/narrativeMap.js

(from the electricity example: https://github.com/observablehq/framework/blob/main/examples/eia/docs/components/map.js)

But from the documentation (https://observablehq.com/plot/features/projections) it looks like the Imago projection is not supported.

Would love to use something like this:

https://observablehq.com/d/51f92faafc3fb631

(the idea is just to have a more interactive CV, rather than the boring standard PDF: jaan.io/cv)

Potentially related: #1191

[Fil]

Out of the box, Plot only supports a handful of projections (the same as d3-geo). But you can pass any projection (as long as it is defined as a D3 projection stream) as the projection option, which is a bit complex to use because it offers quite a few possibilities—in particular to adjust the projection to the chart's dimensions.

In particular all the projections from the d3-geo-projection and d3-geo-polygon modules can be included this way.

For example, to use the Imago projection in a notebook, define:

Plot.plot({
  width,
  height: width * 0.437,
  projection: {
    type: ({ width, height }) => d3.geoImago().fitSize([width, height], land),
    inset: 5
  },
  marks: [Plot.frame(), Plot.geo(land, { stroke: "#000", fill: "#f2f2f2" })]
})

(You also need d3 and land, see https://observablehq.com/@recifs/plot-imago)

To use in Framework:

```js echo
Plot.plot({
  width,
  height: width * 0.437,
  projection: {
    type: ({ width, height }) => d3.geoImago().fitSize([width, height], land),
    inset: 5
  },
  marks: [
    Plot.frame(),
    Plot.geo(land, {
      stroke: "currentColor",
      fill: "currentColor",
      fillOpacity: 0.06
    })
  ]
})
```

```js echo
import {geoImago} from "npm:[email protected]";
```

```js echo
const topo = import.meta.resolve("npm:visionscarto-world-atlas/world/110m.json");
const world = await fetch(topo).then((response) => response.json());
const land = topojson.feature(world, world.objects.land);
```

For background on how the Imago projection was created, see d3/d3-geo-polygon#24

[jaanli]

Thank you so much @Fil ! Do you know if the elastic projection (https://kunimune.home.blog/2023/12/29/introducing-the-elastic-projections/) is supported as well?

Happy to submit a PR for this if it’s feasible.

excited to give this a shot soon!! 🙏🙇‍♂️

[Fil]

I had not seen this recent post, thanks for the link! Framework is already extensible to any projection as long as it follows D3's stream API (https://d3js.org/d3-geo/stream). If you build a JavaScript implementation of Justin's elastic projections, you can reference it directly in Plot.