如何在 plotly python 中将箱形图中位数与多类别 x 轴连接起来
How to connect box plot medians with multicategory x axis in plotly python
我正在尝试绘制此图,但在 Whosebug 或 plotly 论坛中找不到任何示例。
我将 plotly js 示例放在这里以重现代码 better.But 我在 plotly python
.
中需要的真正解决方案
提前感谢您提供此问题的指南或解决方案。
一些研究,但我有多个分类 x 轴!!
Plotly: How to add a median line on a box plot
这是我用过的代码。当然,稍微修改一下以表示我想要的实际情节。
https://plotly.com/javascript/axes/
var trace1 = {
x: [
['giraffes', 'orangutans', 'monkeys','giraffes', 'orangutans', 'monkeys'],
['SF Zoo','SF Zoo','SF Zoo','SF Zoo','SF Zoo','SF Zoo']
],
y: [5, 14, 23,12,13,14],
boxpoints: 'all',
name: 'SF Zoo',
type: 'box',
boxmean:true
};
var trace2 = {
x: [
['giraffes', 'orangutans', 'monkeys','giraffes', 'orangutans', 'monkeys','monkeys','giraffes'],
['LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo']
],
y: [12, 18, 29,22,11,19,12,26],
//name: 'LA Zoo',
type: 'box',
boxmean:true,
name: 'LA Zoo',
boxpoints: 'all'
};
var x= [
['LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo'],
['giraffes', 'orangutans', 'monkeys','giraffes', 'orangutans', 'monkeys','monkeys','giraffes']
];
var y = [12, 18, 29,22,11,19,12,26];
var connecting_means = [{
type: 'scatter',
x: x,
y: y,
//mode: 'line',
transforms: [{
type: 'aggregate',
groups: x,
aggregations: [
{target: 'y', func: 'mean', enabled: true}]}]
}];
var data = [trace1, trace2,connecting_means];
var layout = {
showlegend: true,
xaxis: {
tickson: "boundaries",
ticklen: 15,
showdividers: true,
dividercolor: 'grey',
dividerwidth: 3
}
};
Plotly.newPlot('myDiv', data, layout,connecting_means);
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.4.2.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
正如@r-beginners 评论的那样,Plotly 没有提取箱线图统计数据(例如中位数或四分位数)的能力。因此,您需要手动计算每个框的中位数,并在框之间画线作为轨迹。
这是 Plotly.js 中的一个解决方案,我们为每个单独的箱线图创建数组,使用 written by @JBallin, and connect them using additional traces. I've restructured your data a bit, and used a loop to connect the boxes within each category. You can find the codepen here.
找到它们的中位数
var giraffe_sf = [5,12]
var giraffe_la = [12,22,26]
var orang_sf = [13,14]
var orang_la = [18,11]
var monkeys_sf = [14,24]
var monkeys_la = [29,19,12]
sf_y = giraffe_sf.concat(orang_sf, monkeys_sf)
la_y = giraffe_la.concat(orang_la, monkeys_la)
var categories = ['giraffes', 'orangutans', 'monkeys']
var all_data = [[giraffe_sf, giraffe_la], [orang_sf, orang_la], [monkeys_sf, monkeys_la]]
function median(numbers) {
const sorted = numbers.slice().sort((a, b) => a - b);
const middle = Math.floor(sorted.length / 2);
if (sorted.length % 2 === 0) {
return (sorted[middle - 1] + sorted[middle]) / 2;
}
return sorted[middle];
}
// sort the arrays
var trace1 = {
x: [
['giraffes', 'giraffes', 'orangutans', 'orangutans', 'monkeys', 'monkeys'],
['SF Zoo','SF Zoo','SF Zoo','SF Zoo','SF Zoo','SF Zoo']
],
y: sf_y,
boxpoints: 'all',
name: 'SF Zoo',
type: 'box',
boxmean:true
};
var trace2 = {
x: [
['giraffes', 'giraffes', 'giraffes', 'orangutans', 'orangutans', 'monkeys','monkeys', 'monkeys'],
['LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo']
],
y: la_y,
type: 'box',
boxmean:true,
name: 'LA Zoo',
boxpoints: 'all'
};
var data = [trace1, trace2];
for (let i = 0; i < categories.length; i++) {
trace = {
x: [
[categories[i], categories[i]],
['SF Zoo','LA Zoo']
],
y: [median(all_data[i][0]),median(all_data[i][1])],
mode: 'lines',
type: 'scatter',
marker: {color: 'black'},
showlegend: false
}
data.push(trace)
};
var layout = {
showlegend: true,
xaxis: {
tickson: "boundaries",
ticklen: 15,
showdividers: true,
dividercolor: 'grey',
dividerwidth: 3
}
};
Plotly.newPlot('myDiv', data, layout);
我正在尝试绘制此图,但在 Whosebug 或 plotly 论坛中找不到任何示例。
我将 plotly js 示例放在这里以重现代码 better.But 我在 plotly python
.
提前感谢您提供此问题的指南或解决方案。
一些研究,但我有多个分类 x 轴!!
Plotly: How to add a median line on a box plot
这是我用过的代码。当然,稍微修改一下以表示我想要的实际情节。 https://plotly.com/javascript/axes/
var trace1 = {
x: [
['giraffes', 'orangutans', 'monkeys','giraffes', 'orangutans', 'monkeys'],
['SF Zoo','SF Zoo','SF Zoo','SF Zoo','SF Zoo','SF Zoo']
],
y: [5, 14, 23,12,13,14],
boxpoints: 'all',
name: 'SF Zoo',
type: 'box',
boxmean:true
};
var trace2 = {
x: [
['giraffes', 'orangutans', 'monkeys','giraffes', 'orangutans', 'monkeys','monkeys','giraffes'],
['LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo']
],
y: [12, 18, 29,22,11,19,12,26],
//name: 'LA Zoo',
type: 'box',
boxmean:true,
name: 'LA Zoo',
boxpoints: 'all'
};
var x= [
['LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo'],
['giraffes', 'orangutans', 'monkeys','giraffes', 'orangutans', 'monkeys','monkeys','giraffes']
];
var y = [12, 18, 29,22,11,19,12,26];
var connecting_means = [{
type: 'scatter',
x: x,
y: y,
//mode: 'line',
transforms: [{
type: 'aggregate',
groups: x,
aggregations: [
{target: 'y', func: 'mean', enabled: true}]}]
}];
var data = [trace1, trace2,connecting_means];
var layout = {
showlegend: true,
xaxis: {
tickson: "boundaries",
ticklen: 15,
showdividers: true,
dividercolor: 'grey',
dividerwidth: 3
}
};
Plotly.newPlot('myDiv', data, layout,connecting_means);
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.4.2.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
正如@r-beginners 评论的那样,Plotly 没有提取箱线图统计数据(例如中位数或四分位数)的能力。因此,您需要手动计算每个框的中位数,并在框之间画线作为轨迹。
这是 Plotly.js 中的一个解决方案,我们为每个单独的箱线图创建数组,使用
var giraffe_sf = [5,12]
var giraffe_la = [12,22,26]
var orang_sf = [13,14]
var orang_la = [18,11]
var monkeys_sf = [14,24]
var monkeys_la = [29,19,12]
sf_y = giraffe_sf.concat(orang_sf, monkeys_sf)
la_y = giraffe_la.concat(orang_la, monkeys_la)
var categories = ['giraffes', 'orangutans', 'monkeys']
var all_data = [[giraffe_sf, giraffe_la], [orang_sf, orang_la], [monkeys_sf, monkeys_la]]
function median(numbers) {
const sorted = numbers.slice().sort((a, b) => a - b);
const middle = Math.floor(sorted.length / 2);
if (sorted.length % 2 === 0) {
return (sorted[middle - 1] + sorted[middle]) / 2;
}
return sorted[middle];
}
// sort the arrays
var trace1 = {
x: [
['giraffes', 'giraffes', 'orangutans', 'orangutans', 'monkeys', 'monkeys'],
['SF Zoo','SF Zoo','SF Zoo','SF Zoo','SF Zoo','SF Zoo']
],
y: sf_y,
boxpoints: 'all',
name: 'SF Zoo',
type: 'box',
boxmean:true
};
var trace2 = {
x: [
['giraffes', 'giraffes', 'giraffes', 'orangutans', 'orangutans', 'monkeys','monkeys', 'monkeys'],
['LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo']
],
y: la_y,
type: 'box',
boxmean:true,
name: 'LA Zoo',
boxpoints: 'all'
};
var data = [trace1, trace2];
for (let i = 0; i < categories.length; i++) {
trace = {
x: [
[categories[i], categories[i]],
['SF Zoo','LA Zoo']
],
y: [median(all_data[i][0]),median(all_data[i][1])],
mode: 'lines',
type: 'scatter',
marker: {color: 'black'},
showlegend: false
}
data.push(trace)
};
var layout = {
showlegend: true,
xaxis: {
tickson: "boundaries",
ticklen: 15,
showdividers: true,
dividercolor: 'grey',
dividerwidth: 3
}
};
Plotly.newPlot('myDiv', data, layout);