Beeswarm情节，拆分"swarm" y值，基于布尔值 [英] Beeswarm plot, split "swarm" y value based on boolean
本文介绍了Beeswarm情节，拆分"swarm" y值，基于布尔值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在尝试构建和运行经过修改的蜂群图.关于它的特殊"之处在于，我试图基于布尔值拆分y值.因此，您可以想象一种双重蜂拥的视觉效果-一个部分在x轴上方附加了圆圈，而另一部分在x轴下方附加了圆圈.
I have been trying to get a modified beeswarm plot up and running. What is "special" about it is I'm trying to split the y values based on a boolean. So you can imagine a kind of double beeswarm visual -- one section has circles appended above the x axis, while the other section has the circles appended below the x axis.
我的数据非常简单，但是出于上下文考虑，这里是一个解释:
My data is very simple, but for context here is an explanation:
- d.educ =教育程度(离散变量，以年为单位)
- d.inlf =劳动力(如果是，则为1，如果不是，则为0)
因此，如果我们对此很清楚，请允许我重申我的目标.我希望观察力不在劳动力中的圆位于x轴上方，我希望观察不在劳动力中的圆位于x轴下方.
So, if we're clear on that, let me reiterate my goal. I want the circles where the observation is in the labor force to be above the x axis, and I want the circles where the observation is not in the labor force to be below the x axis.
下面的代码以及来自我完整数据集的150个样本(硬编码):
Code below with 150 sample from my full data set (hard-coded):
var margins = {top:20, bottom:300, left:30, right:100};
var height = 200;
var width = 900;
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");
var formatValue = d3.format(",d");
var xScale = d3.scaleLinear()
.range([0, width]);
/*
var tsvData = d3.tsv('voronoi-circles.tsv');
tsvData.then(function(rawData) {
var data = rawData.map(function(d) {
return {educ:+d.educ, inlf:+d.inlf}
});
*/
var data = [{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 11, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 10.0, 'inlf': 1},
{'educ': 11, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 13.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 11, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 13.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 11, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 10.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 8.0, 'inlf': 1},
{'educ': 10.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 8.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 8.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 0},
{'educ': 9.0, 'inlf': 0},
{'educ': 10.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 15.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 6.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 9.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 9.0, 'inlf': 0},
{'educ': 15.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 10, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 10, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 10.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 10, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 8.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 11.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 9.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0}];
xScale.domain(d3.extent(data, function(d) { return d.educ; }));
var simulation = d3.forceSimulation(data)
.force("x", d3.forceX(function(d) { return xScale(d.educ); }).strength(1))
.force("y", d3.forceY(height / 2))
.force("collide", d3.forceCollide(4))
.stop();
for (var i = 0; i < 120; ++i) simulation.tick();
graphGroup.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale).ticks(20, ".0s"));
var cell = graphGroup.append("g")
.attr("class", "cells")
.selectAll("g").data(d3.voronoi()
.extent([[-margins.left, -margins.top], [width + margins.right, height + margins.top]])
.x(function(d) { return d.x; })
.y(function(d) {
if (d.inlf==1) {
return d.y;
} else {
return d.y+300;
}
})
.polygons(data)).enter().append("g");
cell.append("circle")
.attr("r", 3)
.attr("cx", function(d) { return d.data.x; })
.attr("cy", function(d) { return d.data.y; });
cell.append("path")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
/*
cell.append("title")
.text(function(d) { return d.data.id + "\n" + formatValue(d.data.value); });
*/
//})
.cells path {
fill: none;
pointer-events: all;
}
.cells :hover circle {
fill: red;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
如您所见，我尝试了一种相当简单的方法，只是使用if语句将+300拍到y值.但是，结果与预期不符，并且似乎已将所有值都截断为0.不知道为什么.
As you can see, I tried a fairly straight-forward approach, just slapping on a +300 to the y value using an if statement. However, the result was not as expected, and seems to have truncated all the values to 0. No clue why.
如何修改圆坐标逻辑以说明我的布尔(d.inlf)?还是不是那么简单?也许应该调用另一个单独的d3.voronoi().无论哪种情况，我都不知道如何进行.
How can I modify the circle coordinate logic to account for my bool (d.inlf)? Or is it not that simple; perhaps another separate d3.voronoi() should be called. In either case, I'm not sure how to proceed.
推荐答案
我绝对不知道在这里使用voronoi的目的是什么，所以我就摆脱了它.
I have absolutely no idea what's your purpose using a voronoi here, so I just got rid of it.
您只需要两件事.首先，确定模拟中的y位置:
You need just two things. First, you determine the y position on the simulation:
.force("y", d3.forceY(function(d) {
return d.inlf ? height - 100 : height + 100
}))
然后，设置圆的位置:
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
最后，请记住，有一个速记来表示必须运行模拟刻度的次数，因此...
Finally, have in mind that there is a shorthand for how many times a simulation's tick must run, so this...
for (var i = 0; i < 120; ++i) simulation.tick();
...可以是:
simulation.tick(120);
这是演示:
var margins = {
top: 0,
bottom: 200,
left: 30,
right: 100
};
var height = 150;
var width = 900;
var totalWidth = width + margins.left + margins.right;
var totalHeight = height + margins.top + margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate(" + margins.left + "," + margins.top + ")");
var formatValue = d3.format(",d");
var xScale = d3.scaleLinear()
.range([0, width]);
var data = [{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 11,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 10.0,
'inlf': 1
},
{
'educ': 11,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 13.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 11,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 13.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 11,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 10.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 8.0,
'inlf': 1
},
{
'educ': 10.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 8.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 8.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 9.0,
'inlf': 0
},
{
'educ': 10.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 15.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 6.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 9.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 9.0,
'inlf': 0
},
{
'educ': 15.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 10,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 10,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 10.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 10,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 8.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 11.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 9.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
}
];
xScale.domain(d3.extent(data, function(d) {
return d.educ;
}));
var simulation = d3.forceSimulation(data)
.force("x", d3.forceX(function(d) {
return xScale(d.educ);
}).strength(1))
.force("y", d3.forceY(function(d) {
return d.inlf ? height - 100 : height + 100
}))
.force("collide", d3.forceCollide(4))
.stop();
simulation.tick(120);
graphGroup.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale).ticks(20, ".0s"));
var circles = graphGroup.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("r", 3)
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
.cells path {
fill: none;
pointer-events: all;
}
.cells :hover circle {
fill: red;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
这篇关于Beeswarm情节，拆分"swarm" y值，基于布尔值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
