Raster-plot using array channels

[Hvass-Labs]

How can I make a raster-plot using array channels? My data is roughly:

data = {
    height: 100,
    width: 100,
    x: [1, 2, 3, ...],                              // 1-dim array.
    y: [200, 300, 400, ...],                        // 1-dim array.
    fill: [[10, 5, 7, ...], [3, 2, 8, ...], ...]    // 2-dim array.
}

I'm trying to make the plot as follows, but I don't know which data / index (?) to pass instead of 12345? The following just gives an empty plot:

Plot.raster(12345, {x: data.x, y: data.y, fill: data.fill, width: data.width, height: data.height}).plot()

If instead I convert the data to an array of dicts in roughly this format:

data2 = [{x: 1, y: 200, fill: 10}, {x: 1, y: 300, fill: 5}, ...]

then I can plot it just fine as follows:

Plot.raster(data2, {x: "x", y: "y", fill: "fill", width: data.width, height: data.height}).plot()

But I would prefer to skip the conversion step and use the arrays directly as input channels.

I've made a little Notebook to demonstrate this. Sorry if it's a bit messy, I'm not really a Java-script programmer, and I think HQ uses syntax I'm not familiar with.

Thanks!

[Fil]

As I'm suggesting in #1989 you could use {length: 12345} as the data. But you also need all the channels to have the same length, so starting from the same dataset this would be:

Plot.raster(
  { length: data.width * data.height },
  {
    x: (d, i) => data.x[i % data.width],
    y: (d, i) => data.y[Math.floor(i / data.width)],
    fill: data.fill.flat(),
    width: data.width,
    height: data.height,
    imageRendering: "pixelated"
  }
).plot({ x: { tickFormat: "s" }, grid: true })

(PS: no one is "really" a JavaScript programmer: everyone's always learning, and that is an ongoing process for everyone.)

[Hvass-Labs]

Thanks, it works! I've updated the Notebook in case it may help others in the future.

I think I understand how to use array channels: They need to be flat arrays and all have the same length. The use of { length: data.width * data.height } here is a bit strange, but I guess that it signals to Plot that it should use array-channels of the given length?

Regarding Java-script I think I've seen this guy around here :-)