高倾斜数据直方图的生成

Question

我使用dc.js、crossfilter.js和d3.js来生成条形图。

条形图代表信用卡交易的数据。它把交易金额(x轴)上的交易数(y轴)绘制成图.

看起来是这样的：

​

​

数据数组基本上如下所示：

[
  ...
  {
    txn_id: 1,
    txn_amount: 20
  },
  ...
]

数据是高度可变的，取决于不同的商家等，我不能对分布做出任何假设。

正如您所看到的，由于数据本身的原因，这个图表并不那么有用。在本例中，-$7500和2在$7500周围有一个事务。

在两者之间还有其他数量，但大多数事务都聚集在$0 - $100周围，在那里您可以看到峰值。

不幸的是，有足够的差异，您甚至无法看到较少频繁的事务金额的条形图。

这个回答看起来很接近，但并不完全存在。

我真正想要做的是将x轴的滴答分解成10个大小合理的块，合理地分组事务量，从而使图形更有用。

例如，假设在本例中，平均事务量是$20。极大值为-$7500和$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() ?)和dc.js得到一个类似于我描述的直方图。

那么，正确的方法是什么，或者我应该使用什么库来：

1. 根据任意给定的数据集创建10个“合理”大小的垃圾箱
2. 将数据分组到这些回收箱中(实际上，这部分应该非常简单)

就物理间距直方图的x轴而言，我不认为有必要也不希望蜱的间距不均匀(因此它可能不再是直方图)。

尽管块体大小不相等，我还是希望滴答保持均匀的间距。我一定要把滴答贴上适当的标签。

任何指向正确方向的指示都将不胜感激。

更新：

所以看起来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();

得出的图表如下：

​

​

我想我快到了，但还是不知道我在哪里拐错了弯。

Answer 1

你可以用一个离群点测试来修剪你的，好的离群点，然后把它们加回极端的垃圾箱。我还会将这些回收箱上的文本更改为y，但这可以很容易地通过将一组自定义的滴答传递到轴上来实现。

我用肖韦内准则模拟了一个例子，这是许多离群点测试中的一个。我原本想使用Grubbs测试(或者更好的多个Grubbs测试)，但是有一些工作要做。Chauvenet准则的工作原理非常简单，假设任何大于m标准偏差的值都是一个离群值。

我将所有这些放在一起这里，其功能是：

function chauvenet (x) {
    var dMax = 3;
    var mean = d3.mean(x);
    var stdv = Math.sqrt(variance(x));
    var counter = 0;
    var temp = [];

    for (var i = 0; i < x.length; i++) {
        if(dMax > (Math.abs(x[i] - mean))/stdv) {
            temp[counter] = x[i]; 
            counter = counter + 1;
        }
    };

    return temp
}

这些术语都很明显，dMax是标准偏差的数目，平均值是平均值，stdv是标准差(或方差的平方根)。

注意，我还没有将异常值重新添加到直方图中，但这应该很容易做到。

Answer 2

如果d3给了你一段艰难的时光。试试这个http://imaginea.github.com/uvCharts :)您必须已经知道nvd3了