2

With Plotly.JS I have:

  • z0 a 500 x 200 array, to be displayed as 'heatmap', with axis in millimeters in range 0 .. 2500mm x 0 .. 1000mm (thus the x, y axis are rescaled with a factor multiplier = 5.0), here this trace is rendered as a constant grey color because the value is constant

  • z1 an RGB array of size 2000 x 800 (x3 for RGB), to be displayed with type: 'image', exactly on top of z0: both layers should be on top of each other (here it can work because same aspect ratio)

The following code works, but unfortunately, z1 doesn't take the full width / full height.

How to modify the following code such that the RGB image z1 takes the full width / full height, i.e. up to 2500mm and 1000mm for x, y axis ?

var multiplier = 5.0;
var z0 = Array.from({length: 200}, () => Array.from({length: 500}, () => 100));
var z1 = Array.from({length: 800}, () => Array.from({length: 2000}, () => [Math.random() * 255, Math.random() * 255, Math.random() * 255]));
var x_values = z0[0].map((el, idx) => idx * multiplier);
var y_values = z0.map((el, idx) => (z0.length - idx - 1) * multiplier);
const data = [
  {type: 'image', z: z1, colormodel: 'rgb', x: x_values, y: y_values},
  {type: 'heatmap', z: z0, colorscale: 'Cividis', opacity: 0.6, x: x_values, y: y_values }
];
const layout = {width: 600, xaxis: {anchor: 'y', scaleanchor: 'y', constrain: 'domain', "ticksuffix": " mm"}, yaxis: {anchor: 'x', autorange: 'reversed', constrain: 'domain', "ticksuffix": " mm"}};
Plotly.newPlot('plot', data, layout);
<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="plot"></div>

Linked questions:

Note:

I tried to create other x: x_values_2, y: y_values_2 arrays for the trace z1, with another multiplier, but it seems it has no effect.

Basj
  • 41,386
  • 99
  • 383
  • 673
  • 1
    I'm not sure you can set `x` and `y` for the image trace as you do for the heatmap. Though, having the heatmap rescaled to 1000*2500, the 800*2000 image would need a scale factor of 1.25, which you can set with `dx: 1.25, dy: 1.25`. is it what you want to achieve ? – EricLavault Mar 10 '23 at 15:10
  • Also note that the code currently places z0 on top of z1, not the contrary (according to the trace order in the data array). – EricLavault Mar 10 '23 at 15:17
  • +100 @EricLavault! You can post your comment as an answer, thanks one million times! – Basj Mar 10 '23 at 15:25

1 Answers1

1

We can't set x and y for the image trace as we do for the heatmap.

Though, having the heatmap rescaled to 1000x2500, an 800*2000 image would need a scale factor of 1.25 to match, which we can set using dx and dy :

const data = [
  {type: 'image', z: z1, colormodel: 'rgb', dx: 1.25, dy: 1.25},
  {type: 'heatmap', z: z0, colorscale: 'Cividis', opacity: 0.6, x: x_values, y: y_values }
];

Also note that the code currently places z0 on top of z1, not the contrary (according to the trace order in the data array).

EricLavault
  • 12,130
  • 3
  • 23
  • 45