Raster perserveAspectRatio?

[aboveyunhai]

how to config the preserveAspectRatio in Plot.raster,
currently it's preserveAspectRatio: "none". So the Raster got stretch to the full width&height.

I have to do something like this to post-process the plot, wonder if there is a better way to handle it.

    if (mapPlot && "querySelectorAll" in mapPlot) {
      const rasters = mapPlot.querySelectorAll<SVGImageElement>(
        'g[aria-label="raster"]>image'
      );
      rasters.forEach((r) => {
        r.setAttribute("preserveAspectRatio", "xMidYMid meet");
      });
    }

[Fil]

Sounds interesting. Can you give a concrete example of what you're trying to achieve?

[aboveyunhai]

I spin up an example so you can try it out, see how the image got stretched when you comment out that post-process code block.
https://observablehq.com/d/ed0025792f2a5632

[mbostock]

Removing (or altering) the preserveAspectRatio attribute will mean that the raster data will not align with the position scales (Plot’s coordinate system). So, I don’t think you want to do that; or if you do, you want to suppress the x-axis so that it’s not misleading.

Instead, I recommend you use Plot’s aspectRatio option, and set it to 1 if you want the data to be displayed in a square aspect ratio (as with equirectangular coordinates). This option will then compute an appropriate default height for the plot.

Plot.plot({
  color: {
    scheme: "BuGn",
    legend: true
  },
  aspectRatio: 1,
  marks: [
    Plot.raster(data, {
      width: 135,
      height: 231,
      x1: 93.835,
      x2: 108.82,
      y1: 34.053,
      y2: 8.411999999999999,
      interpolate: "none"
    })
  ]
})

If you want a smaller plot, you can set the width attribute to something smaller; it defaults to 640.

[aboveyunhai]

Thx for letting me know the coordinate system. Then whatever I'm trying to do with observable plot is actually not the right approach.
I believe the thing I was trying to do is something like

     <div width="here" height="here" center-children> 
         <ObservablePlot 
            aspectRatio=1 
            compute the height and width based on original raster w/h ratio and (width < height) or (width > height)
            to simulate the "xMidYMid meet"
         />
      </div>

[mbostock]

If you set aspectRatio, you should only set the width; the height will then be computed automatically based on the raster data.

[aboveyunhai]

If you set aspectRatio, you should only set the width; the height will then be computed automatically based on the raster data.

I got you, the height part is my typo, I don't need to set it as long as I have the correct width.
In case if you wonder what I was trying to do. I was simulating the behavior of css object-fit: contain.
Given a container with random height/width combination, and raster data with a known ratio,
basically keep the aspect ratio of the chart and fill out the available space of the container. Leave the unfilled to be blank once the element hits the container border.

[Fil]

If this is a map of some sort, with x and y representing planar coordinates, you could use a projection of type "identity", or "reflect-y":

Plot.plot({
  color: {
    scheme: "BuGn",
    legend: true
  },
  width: 200,
  projection: {
    type: "identity",
    domain: {
      type: "MultiPoint",
      coordinates: [
        [93.835, 34.053],
        [108.82, 8.411999999999999]
      ]
    }
  },
  marks: [
    Plot.raster(data, {
      width: 135,
      height: 231,
      x1: 93.835,
      x2: 108.82,
      y1: 34.053,
      y2: 8.411999999999999,
      interpolate: "none"
    })
  ]
})