Plotly.jsの同じ色のさまざまなヒートマップ

Question

複数のヒートマップがあります。私はそれらを別々にプロットしています。それらをプロットするために、私はすべてのヒートマップに対して同じ色のスケールを定義する関数を呼び出します。私はカスタムColorScaleのを定義しているが、まだそれは別のヒートマップの値の範囲に応じて、カラースケールを変更する

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' 
}]; 

：関数は以下のようにデータのパラメータを持っています。

私はカスタムのカラースケールを定義してスケールを変更すべきではないと考えました。どのような値の範囲であっても。

ヒートマップを同じ縮尺に保つことに関する提案はありますか？

Answer 1

zmin and zmaxを指定する必要があります。

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

範囲が同じでカラーバーが同じ3つのランダムセットの例については以下を参照してください。

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>