3

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

条形图表示信用卡交易的数据。它绘制了交易数量（y 轴）与交易金额（x 轴）的关系。

它看起来像这样：

条形图

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

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

数据因不同的商家等而变化很大，我无法对分布做出任何假设。

正如您所看到的，由于数据本身，该图表并不是那么有用。在这种情况下，大约有 1-$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

（块/bin 的大小越接近我们得到的平均值越小）。

诚然，我已经很久没有认真研究过统计学了，所以我很生疏。但似乎我将数据分解成箱/卡盘的方式与我的数据的标准偏差有很大关系。

我想我对我想要的东西有很好的感觉，我只是有点迷失如何使用d3.js( d3.mean(), d3.quantile()?) 并dc.js获得类似于我描述的直方图。

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

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

就物理间距直方图的 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();

和结果图表：

分位数条形图

我想我已经接近了，但仍然不确定我在哪里走错了路。

4

2 回答 2

2

您可以使用异常值测试来修剪您的异常值，然后将它们添加回极端垃圾箱。我还将这些箱子上的文本更改为 y，但这可以通过将一组自定义刻度传递给轴来轻松完成。

我使用Chauvenet 的标准模拟了一个示例，这是许多异常值测试之一。我最初想使用 Grubbs 测试（或者甚至更好的多重 Grubbs Beck 测试），但是要编写代码还需要做一些工作。Chauvenet 的标准很简单，它假设任何大于平均值的标准偏差的值都是异常值。

我把这些都放在了这里，功能是：

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 是标准偏差的数量，mean 是平均值，stdv 是标准偏差（或方差的平方根）。

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

于 2013-10-10T11:53:04.373 回答
0

如果 d3 让你很难过.. 试试这个 http://imaginea.github.com/uvCharts :) 你一定已经知道 nvd3

于 2013-10-11T08:46:07.243 回答