Various heatmaps on same colorscale in Plotly.js

Question

I have multiple heatmaps. I am plotting them separately. To plot them I call the function which defines the same colorscale for all the heatmaps. The function has the data parameter as below:

  var data = [{
z: Q,
x:x,
y:y,
//custom colorscale; this makes sure different maps are on same scale
colorscale: [[-3, 'rgb(166,206,227)'], [-2, 'rgb(31,120,180)'], [-1, 'rgb(178,223,138)'], [1, 'rgb(51,160,44)'], [2, 'rgb(251,154,153)'], [3, 'rgb(227,26,28)']],
//grey colorscale
// colorscale: 'Greys',

// heatmap
type: 'heatmap'
}];

I have defined a custom colorscale but still it changes the color scale depending on the value ranges of different heatmaps.

I thought defining the custom colorscale should not change the scale; no matter what the range of values are.

Any suggestion regarding keeping the heatmaps on same scale?

Answer 1

You need to specify zmin and zmax.

data = [
    {
        z: z,
        zmin: 0,
        zmax: 1,
        type: "heatmap",
        colorscale: colorscaleValue
    }
];

See below for an example with three random sets with different ranges but identical color bars.

var colorscaleValue = [[-3, 'rgb(166,206,227)'], [-2, 'rgb(31,120,180)'], [-1, 'rgb(178,223,138)'], [1, 'rgb(51,160,44)'], [2, 'rgb(251,154,153)'], [3, 'rgb(227,26,28)']];
var i = 0;
var j = 0;
var z = [];
for (i = 0; i < 5; i += 1) {
    z[i] = [];
    for (j = 0; j < 5; j += 1) {
        z[i].push(Math.random());
    }
}

var data = [
    {
        z: z,
        type: "heatmap",
        colorscale: colorscaleValue
    }
];


Plotly.newPlot("plot1", data);

for (i = 0; i < 5; i += 1) {
    for (j = 0; j < 5; j += 1) {
        z[i][j] = Math.random() * 2;
    }
}

data = [
    {
        z: z,
        zmin: 0,
        zmax: 1,
        type: "heatmap",
        colorscale: colorscaleValue
    }
];
Plotly.newPlot("plot2", data);

for (i = 0; i < 5; i += 1) {
    for (j = 0; j < 5; j += 1) {
        z[i][j] = Math.random() * 5;
    }
}

data = [
    {
        z: z,
        zmin: 0,
        zmax: 1,
        type: "heatmap",
        colorscale: colorscaleValue
    }
];
Plotly.newPlot("plot3", data);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot1" style="width:280px; height:300px;"></div>
<div id="plot2" style="width:280px; height:300px;"></div>
<div id="plot3" style="width:280px; height:300px;"></div>