Changing tick-values in raster-plot

[Hvass-Labs]

Consider this gallery example. How can I change x-axis tick values to go from e.g. 700 to 1000 instead of from 0 to 87, which is just an enumeration of the input data?

I've tried changing the domain, range and ticks args, but I can't get it working.

Thanks!

[Fil]

If you want to keep data as an array of pixel colors, the best solution is to apply an affine transform on x and y:

Plot.plot({
  aspectRatio: 1,
  color: {label: "Elevation (m)", legend: true},
  x: {transform: d => d * 10 - 100},
  y: {transform: d => d * 10 + 223},
  marks: [
    Plot.raster(volcano.values, {width: volcano.width, height: volcano.height})
  ]
})

Otherwise you can see data as an array of samples with abstract positions and values, and use a spatial interpolator to fill the image; but it's not going to give the same image (for better or worse).

Plot.plot({
  aspectRatio: 1,
  color: {label: "Elevation (m)", legend: true},
  marks: [
    Plot.raster(volcano.values, {
      fill: Plot.identity,  // the value is the color
      x: (d, i) => (i % volcano.width) * 10 - 100, 
      y: (d, i) => Math.floor(i / volcano.width) * 10 + 223,
      interpolate: "random-walk" 
    })
  ]
})

[Hvass-Labs]

Thanks. Please elaborate what you mean by "... compute X and Y as arrays of numbers, and pass them as channels directly to the mark. It will be faster."

I thought that Plot only accepted arrays of dicts like this:

data1 = [{x: 1, y: 200}, {x: 2, y: 300}, ...]

Are you saying that it also accepts data like this?

data2 = {x: [1, 2, ...], y: [200, 300, ...]}

That would make my life a lot easier, as I have had to make all kinds of conversion functions to get my data in the data1 format above. It would have been much easier for me to use the data2 format. But I just tried it with the following simple example in a HQ Notebook, and it just produces an empty plot?

data = ({x: aapl.map(d => d.Date), y: aapl.map(d => d.Close)});
Plot.lineY(data, {x: "x", y: "y"}).plot({y: {grid: true}})

[Fil]

see the documentation for channels: https://observablehq.com/plot/features/marks#marks-have-channels

[Hvass-Labs]

This doesn't seemt to be documented under "Marks have channels", but the following is mentioned under "Mark options"

Plot also supports columnar data for greater efficiency with bigger datasets; for example, data can be specified as any array of the appropriate length (or any iterable or value compatible with Array.from), and then separate arrays of values can be passed as options.

My small example from above works like this:

X = aapl.map(d => d.Date);
Y = aapl.map(d => d.Close);
index = [...Array(X.length).keys()];
Plot.lineY(index, {x: X, y: Y}).plot({y: {grid: true}})

This is a complete surprise to me. I think this needs to be documented more clearly, so I'll open another issue, as this issue is getting derailed.

[Fil]

new topic is #1989

[Hvass-Labs]

You answered my original question so I'm closing this. I still don't quite understand how to use array channels, so I've opened #1990 with that question. Thanks!