在实际的二维直方图中，我如何指定一个z值而不依赖于数据的密度？

Question

看看https://plot.ly/javascript/2D-Histogram/，我看到他们给了500个点，他们绘制了密度的热图。

但我有这样的数据

(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)

我想实现他们所展示的一切。我该怎么做呢？我曾经想过复制我的数据，给他看上去像一个发行版(即重复(0，0，1) z00次数，重复(0，1，1) z01次数，等等)，但感觉不对。

有什么想法吗？

注: x=0-1意味着我有一桶从x=0到x=1的点，y也是这样，所以我希望我的正方形从x，y=0,0到x，y=1,1有值z00，上面的平方(x，y=0,1 to x，y=1,2)有值z01等等。

Answer 1

据我所知，您不能直接在Plotly中这样做，即您需要复制您的数据。使用直方图的问题是您的z00 bin，它需要调整为零值。

​

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>

​

另一种方法是使用带有方格的气泡图，但在这里您可以指定大小仅以像素为单位，而不是相对于轴的大小。此外，对于不是正方形的矩形，它看起来很奇怪。

​

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>

​

第三种选择是使用形状，但是您需要指定自己的颜色比例。这个解决方案需要最少的数据复制，而且相当灵活。

​

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({
	        type: 'rect',
			x0: i,
			y0: j,
			x1: i + 1,
			y1: j + 1,
			line: {
			    width: 2
			},
			fillcolor: 'rgb(' + 255 * (z[i][j] - c_min) / (c_max - c_min) + ', 128, 128)'
	    });
        annotations.push({
            x: i + 0.5,
		  	y: j + 0.5,
		    text: z[i][j],
		 	showarrow: false
        });
    }
}

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

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

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

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

​

Answer 2

我很感激这是个老生常谈的问题，但如果像我这样的人无意中发现这个问题，我也会寻找同样的答案。下面的代码将提供OP问题的解决方案。值得注意的是组号：'sum'，仅仅添加z值就会导致它们被忽略。

Plotly.newPlot(‘graph’, [{
    type: ‘histogram2dcontour’,
    x: [1,1.1,1.2,1,3,3,4],
    y: [1,1.1,1.2,2,4,4,5],
    histfunc: ‘sum’,
    z: [0.1,0.1,0.1,0.1,0.2,0.3,0.1]
}])

从文件中：

组函数(str (默认的“计数”，如果不提供参数，则为“sum”)--“count”、“sum”、“avg”、“min”或“max”之一。函数用于汇总汇总值(注意:可以用组范数规范化)。这个函数的参数是y(x的值(如果方向是'v'(‘h’)。