如何使用带有值的向量为散点图着色？ [英] How can I color my scatter using a vector with values?
问题描述
好吧，我想使用带有值的向量为散点图着色。实际上，我要使用其他维度来创建散点图。
使用这些行，它会根据散布所建立的维数给出的值为散布提供颜色。
.colorAccessor（function（d）{return d.key [1]}）
.colors（d3.scaleSequential（d3.interpolateOranges））
。 colorDomain（y_range）
y_range = [y_min，y_max]
将颜色列包含在散点图的尺寸中，但会减慢过滤过程。像这样的东西：
scatterDim = crossFilter.dimension（function（d）{return [d [it.variable [0]] ，d [it.variable [1]]，d [it.color]]}）
.colorAccessor（function（d）{return d.key [2]}）
。 colors（d3.scaleSequential（d3.interpolatePlasma））
.colorDomain（[colorUnits [0]，colorUnits [colorUnits.length-1]]），
我想为颜色设置其他尺寸：
colorDimension = crossFilter.dimension（function（d）{return d [it.color]}），
colorGroup = colorDimension.group（）。reduceCount（），
colorAll = colorGroup.all（），
colorUnits = []，
count = 0；
for（colorAll中的变色）
{
colorUnits [count] = colorAll [color] .key;
count ++;
}
.colorAccessor（//我的矢量colorUnits甚至是尺寸的一些不同代码？！//）
.colors（d3.scaleSequential（d3.interpolatePlasma））
.colorDomain（[colorUnits [0]，colorUnits [colorUnits.length-1]]），
我还想知道如何将scaleOrdinal用于颜色。如果向量colorUnits包含字符串。
名称 dimension在crossfilter和dc.js中有点令人困惑。
它的真正意思是，我想通过此键对数据进行分类，并对其进行过滤。
在许多示例中，将颜色作为维度键中的第三个元素的原因是它很方便。更改键比汇总值更容易。
当您向维键添加颜色时图表变慢的事实告诉我您没有唯一的颜色。
每个X / Y对。不必为每个X / Y对绘制一个点，而是为每个X / Y /颜色三联体画一个点。您也不需要创建
假设每个X / Y对只需要一个点，则需要确定哪种颜色，除非您希望对颜色进行分档，聚合或过滤。使用。然后，您可以更改 reduction （而不是键）来添加此数据：
scatterDim = crossFilter.dimension（function（d）{
return [d [it.variable [0]]，d [it.variable [1]];
}），
scatterGroup = scatterDim .group（）。reduce（
function（p，v）{//添加
p.count ++; //等效于reduceCount
p.color = Combine_colors（p.color，v [it .color]）;
return p;
}，
function（p，v）{//删除
p.count--;
//可能会进行调整p.color
return p;
}，
function（）{//初始化
return {count：0，color：null};
}
）;
如果您不在乎使用哪种颜色，则不需要 combine_colors ;只需使用 v [it.color] 。否则，您需要根据应用程序来决定。
现在，散点图组具有对象作为其值，您可以更改散点图以利用它们：
scatterPlot
.existenceAccessor（d => d.value.count）//不绘制点当它为零时
.colorAccessor（d => d.value.color）
实际上，如果您确实想用不同的颜色绘制所有点，例如使用不透明性以允许过度绘制，则可能需要散点图的画布实现，因为SVG最多可以容纳数千个点。
小提琴示例。 / p>
Well, I want to color my scatter using a vector with values. Actually, I want to use other dimension than the one used for creating the scatter.
Using these lines it gives a color to my scatter using the values given by the dimension that scatter is built on.
.colorAccessor(function(d) {return d.key[1]})
.colors(d3.scaleSequential(d3.interpolateOranges))
.colorDomain(y_range)
y_range = [y_min, y_max]
I tried to include the column for color in the dimension of the scatter, but it slows down the process of filtering. Something like this:
scatterDim = crossFilter.dimension(function(d) { return [d[it.variable[0]], d[it.variable[1]], d[it.color]]})
.colorAccessor(function(d) {return d.key[2]})
.colors(d3.scaleSequential(d3.interpolatePlasma))
.colorDomain([colorUnits[0], colorUnits[colorUnits.length - 1]]),
I want to have a different dimension for color:
colorDimension = crossFilter.dimension(function (d) { return d[it.color] }),
colorGroup = colorDimension.group().reduceCount(),
colorAll = colorGroup.all(),
colorUnits = [],
count = 0;
for(var color in colorAll)
{
colorUnits[count] = colorAll[color].key;
count++;
}
.colorAccessor(//some different code for my vector colorUnits or even for dimension?!//)
.colors(d3.scaleSequential(d3.interpolatePlasma))
.colorDomain([colorUnits[0], colorUnits[colorUnits.length - 1]]),
I would also like to know how to use scaleOrdinal for color. In case that the vector colorUnits contains strings.
The name "dimension" is a little confusing in crossfilter and dc.js. It isn't used to describe the "Y" (aggregated) values, or the color.
It really means, "I want to bin my data by this key, and filter on it."
The reason you will find color as a third element in dimension keys in many examples is that it's expedient. It's easier to change the keys than the aggregated values. But it doesn't really make sense.
The fact that your chart got slower when you added color to your dimension key tells me that you don't have a unique color for each X/Y pair. Instead of drawing a dot for each X/Y pair, you end up with a dot for each X/Y/color triplet.
You also don't need to create a separate color dimension unless you want to bin, aggregate, or filter on color.
Assuming you only want one dot per X/Y pair, you need to decide which color to use. Then you can change the reduction, instead of the key, to add this data:
scatterDim = crossFilter.dimension(function(d) {
return [d[it.variable[0]], d[it.variable[1]]];
}),
scatterGroup = scatterDim.group().reduce(
function(p, v) { // add
p.count++; // reduceCount equivalent
p.color = combine_colors(p.color, v[it.color]);
return p;
},
function(p, v) { // remove
p.count--;
// maybe adjust p.color
return p;
},
function() { // init
return {count: 0, color: null};
}
);
If you don't care which of the colors is used, you don't need combine_colors; just use v[it.color]. Otherwise, that's something you need to decide based on your application.
Now the scatter group has objects as its values, and you can change the scatter plot to take advantage of them:
scatterPlot
.existenceAccessor(d => d.value.count) // don't draw dot when it is zero
.colorAccessor(d => d.value.color)
If in fact you do want to draw all the dots with different colors, for example using opacity to allow overplotting, you probably need a canvas implementation of a scatter plot, because SVG is only good up to thousands of points. There is one in the works for dc.js but it needs to be ported to the latest APIs.
I would also like to know how to use scaleOrdinal for color. In case that the vector colorUnits contains strings.
Not sure what you mean here. scaleOrdinal takes strings as its domain, so
.colors(d3.scaleOrdinal(colorUnits, output_colors))
should work?
Example
Since I'm failing to communicate something or another, here is an example. The color strings come from an array since I don't have an example of your data or code:
const names = ["Zero", "One", "Two", "Three", "Four", "Five"];
speedSumGroup = runDimension.group()
.reduce(
function(p, v) { // add
p.count++; // reduceCount equivalent
p.color = names[+v.Expt];
return p;
},
// ... as before
);
chart
.colorAccessor(d => d.value.color)
.colors(d3.scaleOrdinal(names, d3.schemeCategory10))
Once again, if the method isn't working for you, the best way to figure it out is to log speedSumGroup.all(). I get:
[
{
"key": [
1,
850
],
"value": {
"count": 1,
"color": "One"
}
},
{
"key": [
1,
880
],
"value": {
"count": 1,
"color": "Three"
}
},
{
"key": [
1,
890
],
"value": {
"count": 2,
"color": "Five"
}
},
// ...
]
这篇关于如何使用带有值的向量为散点图着色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
