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)

我希望实现他们所展示的目标。我该怎么做？我曾想过复制我的数据给Plotly看起来像他的分布（即重复（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到x，y = 1,2）的平方得到值z01等）

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

第三个选项是（误）使用形状，但是你需要指定自己的色标。此解决方案需要最少量的数据复制，并且非常灵活。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我很欣赏这是一个古老的问题，但是如果像我这样的人偶然发现这个问题并寻找相同的答案。以下代码将提供 OP 问题的解决方案。需要注意的是 histfun: '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]
}])

来自文档：

histfunc (str (str (default 'count' if no arguments is provided, else 'sum')) – 'count', 'sum', 'avg', 'min', or 'max' 之一。函数用于汇总的聚合值（注意：可以用 histnorm 归一化）。如果方向为“v”(），则此函数的参数是 y(‘h’x) 的值。

在Plotly 2D直方图中，如何指定z值而不是依赖于我的数据密度？

2 个答案: