我在用着dc.js
, crossfilter.js
and d3.js
生成条形图。
条形图表示信用卡交易的数据。它绘制了交易数量(y 轴)与交易金额(x 轴)的关系。
它看起来像这样:
数据数组基本上如下所示:
[
...
{
txn_id: 1,
txn_amount: 20
},
...
]
根据不同的商家等,数据变化很大,我无法对分布做出任何假设。
正如您所看到的,由于数据本身的原因,该图并不是那么有用。在这种情况下,有 1 笔交易-$7500
and 2
大约$7500
.
中间还有其他金额,但大多数交易都集中在$0 - $100
你可以看到尖峰的地方。
不幸的是,存在足够的差异,您甚至看不到频率较低的交易金额的条形图。
This answer https://stackoverflow.com/questions/8195820/histogram-in-javascript看起来很接近,但还不够。
我真正想做的是将 x 轴刻度分成 10 个大小合理的块,将交易金额合理地分组,以使图表更有用。
例如,在这种情况下,平均交易金额是$20
。极值最小值和最大值是-$7500
and $7500
因此,在这个特定的示例中,我可能希望将 x 轴分成块,如下所示:
Bin 1: -$1000 >= transaction amount
Bin 2: -$100 >= transaction amount > -$1000
Bin 3: -$50 >= transaction amount > -$100
Bin 4: $0 >= transaction amount > -$50
Bin 5: $15 >= transaction amount > $0
Bin 6: $25 >= transaction amount > $15
Bin 7: $40 >= transaction amount > $25
Bin 8: $100 >= transaction amount > $40
Bin 9: $1000 >= transaction amount > $100
Bin 10: transaction amount > $1000
(块/箱的大小越接近我们得到的平均值就越小)。
诚然,我已经很久没有认真研究过统计学了,所以我已经很生疏了。但看来我将数据分解为数据箱/卡盘的方式与数据的标准差有很大关系。
我想我对自己想要的东西有很好的感觉,我只是有点不知道如何使用d3.js
(d3.mean()
, d3.quantile()
?) and dc.js
获得类似于我所描述的直方图。
那么正确的方法是什么,或者我应该使用哪些库:
- 根据任意给定的数据集创建 10 个“合理”大小的 bin
- 将数据分组到这些容器中(实际上,这部分应该非常简单)
就物理间距直方图的 x 轴而言,我认为没有必要或不需要刻度线间隔不均匀(因此也许它不再是直方图)。
尽管块大小不相等,但我还是希望刻度保持均匀分布。我会确保对刻度进行适当的标记。
任何正确方向的指示将不胜感激。
Update:
所以看来d3.js
像往常一样比我先走几步,已经到了我的后面。我相信我可以使用d3.scale.quantile()
将 x 轴分成 10 个分位数(十分位数)。事实上,我已经设置了我的分位数比例,它似乎做了正确的事情,当我直接将数字输入到分位数比例函数(通过 JS 控制台)时,它输出正确的存储桶(在 10 个桶中)。
但不幸的是我的图表仍然混乱。这是我的代码:
var datum = crossfilter(data),
amount = datum.dimension(function(d) { return +d.txn_amount; }),
amounts = amount.group();
amountsChart = dc.barChart("#dc-amounts-chart");
amountsChart
.width(defaultWidth)
.height(defaultHeight)
.margins({top: 20, right: 20, bottom: 20, left: 50})
.dimension(amount)
.group(amounts)
.centerBar(true)
.gap(5)
.elasticY(true)
.x(d3.scale.quantile().domain(amounts.all().map(function(d) {
// d.key is the transaction dollar amount,
// d.value is the number of transactions at that amount
return d.key;
}))
.range([0,1,2,3,4,5,6,7,8,9]));
amountsChart.yAxis().ticks(5);
dc.renderAll();
以及结果图表:
我想我已经接近了,但仍然不确定我在哪里转错了方向。