In Plotly 2D-Histogramm, wie kann ich einen Z-Wert angeben, anstatt sich auf die Dichte meiner Daten zu verlassen?

Question

Betrachtet man https://plot.ly/javascript/2D-Histogram/ Ich sehe, dass sie 500 Punkte geben und sie zeichnen die Heatmap der Dichte.

Aber ich habe Daten wie

(x=0-1, y=0-1, z00) 
(x=0-1, y=1-2, z01) 
(x=0-1, y=2-3, z02) 
(x=1-2, y=0-1, z10) 
(x=1-2, y=1-2, z11) 
(x=1-2, y=2-3, z12) 

und ich möchte erreichen, was sie zeigen. Wie kann ich es tun? Ich habe daran gedacht, meine Daten zu duplizieren, um Plotly zu geben, was ihm wie eine Verteilung erscheint (dh wiederhole (0, 0, 1) z00 mal, wiederhole (0, 1, 1) z01 mal, etc.) aber es fühlt sich nicht an rechts

Irgendeine Idee?

Hinweis: x = 0-1 bedeutet, ich habe einen Eimer mit Punkten von x = 0 bis x = 1, gleich für y. Also ich möchte mein Quadrat von x, y = 0,0 bis x, y = 1,1 haben um den Wert z00, das Quadrat über (x, y = 0,1 bis x, y = 1,2) zu haben der Wert z01 usw.)

Answer 1

Soweit ich weiß, können Sie das nicht direkt in Plotly tun, dh Sie müssen Ihre Daten replizieren. Das Problem bei der Verwendung eines Histogramms ist Ihre z00 Bin, die für die Nullwerte angepasst werden muss.

var z = [[], []]; 
 
z[0][0] = 1; 
 
z[0][1] = 18; 
 
z[0][2] = 5; 
 
z[1][0] = 25; 
 
z[1][1] = 12; 
 
z[1][2] = 30; 
 

 
var x = []; 
 
var y = []; 
 

 
for (var i = 0; i < z.length; i += 1) { 
 
    for (var j = 0; j < z[i].length; j += 1) { 
 
     for (var v = 0; v < z[i][j]; v += 1) { 
 
      x.push(i + 0.001); 
 
      y.push(j + 0.001); 
 
     } 
 
    } 
 
} 
 

 
var data = [ 
 
    { 
 
    x: x, 
 
    y: y, 
 
    type: 'histogram2d', 
 
    } 
 
]; 
 
Plotly.newPlot('histo', data);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id="histo"></div>

Die Alternative wäre ein Blasendiagramm mit Plätzen verwenden, aber hier können Sie die Größe nur in Pixel und nicht in Bezug auf die Achsengröße angeben. Außerdem sieht es komisch aus für Rechtecke, die keine Quadrate sind.

var z = [[], []]; 
 
z[0][0] = 1; 
 
z[0][1] = 18; 
 
z[0][2] = 5; 
 
z[1][0] = 25; 
 
z[1][1] = 12; 
 
z[1][2] = 30; 
 

 
var x = []; 
 
var y = []; 
 
var colors = []; 
 
for (var i = 0; i < z.length; i += 1) { 
 
    for (var j = 0; j < z[i].length; j += 1) { 
 
     x.push(i); 
 
     y.push(j); 
 
     colors.push(z[i][j]); 
 
    } 
 
} 
 
var data = [ 
 
    { 
 
    x: x, 
 
    y: y, 
 
    mode: 'markers', 
 
    marker: { 
 
     color: colors, 
 
     symbol: Array(x.length).fill('square'), 
 
     size: Array(x.length).fill(100), 
 
     sizemode: 'diameter' 
 
    } 
 
    } 
 
]; 
 

 
layout = { 
 
    showlegend: false, 
 
    height: 600, 
 
    width: 600 
 
}; 
 

 
Plotly.newPlot('bubbles', data, layout);

<div id="bubbles"></div> 
 
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Die dritte Option (mis) würde verwenden Formen, aber dann müssen Sie Ihre eigene Farbskala angegeben werden. Diese Lösung benötigt die minimale Datenreplikation und ist ziemlich flexibel.

var z = [[], []]; 
 
z[0][0] = 1; 
 
z[0][1] = 18; 
 
z[0][2] = 5; 
 
z[1][0] = 25; 
 
z[1][1] = 12; 
 
z[1][2] = 30; 
 

 
var c_max = 30; // the max value of your array, pre-defined for brevity 
 
var c_min = 1; // the min value of your array 
 
var shapes = []; 
 
var annotations = []; 
 
for (var i = 0; i < z.length; i += 1) { 
 
    for (var j = 0; j < z[i].length; j += 1) { 
 
     shapes.push({ 
 
\t   type: 'rect', 
 
\t \t \t x0: i, 
 
\t \t \t y0: j, 
 
\t \t \t x1: i + 1, 
 
\t \t \t y1: j + 1, 
 
\t \t \t line: { 
 
\t \t \t  width: 2 
 
\t \t \t }, 
 
\t \t \t fillcolor: 'rgb(' + 255 * (z[i][j] - c_min)/(c_max - c_min) + ', 128, 128)' 
 
\t  }); 
 
     annotations.push({ 
 
      x: i + 0.5, 
 
\t \t \t y: j + 0.5, 
 
\t \t  text: z[i][j], 
 
\t \t \t showarrow: false 
 
     }); 
 
    } 
 
} 
 

 
var trace0 = { 
 
    x: [], 
 
\t y: [], 
 
\t text: [], 
 
\t mode: 'text', 
 
\t type: 'scatter' 
 
}; 
 

 
var layout = { 
 
    height: 700, 
 
\t width: 700, 
 
\t shapes: shapes, 
 
\t hovermode: 'closest', 
 
\t annotations: annotations, 
 
\t xaxis: { 
 
\t  showgrid: false, 
 
\t \t zeroline: false 
 
\t }, 
 
\t yaxis: { 
 
\t  showgrid: false, 
 
\t \t zeroline: false 
 
\t } 
 
}; 
 

 
Plotly.newPlot('shapes', [trace0], layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id="shapes"></div>