とを使用しdc.js
て棒グラフを生成しています。crossfilter.js
d3.js
棒グラフは、クレジット カード トランザクションのデータを表します。トランザクションの金額 (x 軸) に対してトランザクション数 (y 軸) をプロットします。
次のようになります。
データ配列は基本的に次のようになります。
[
...
{
txn_id: 1,
txn_amount: 20
},
...
]
データは、さまざまな商人などによって大きく異なり、分布については推測できません。
ご覧のとおり、このグラフはデータ自体が原因であまり役に立ちません。この場合、-$7500
と2
の前後に1 つのトランザクションがあり$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
の使い方と、私が説明した方法と同様にヒストグラムを取得する方法について少し迷っています。
正しい方法は何ですか、またはどのライブラリを使用する必要がありますか:
- 任意に与えられたデータセットに従って、「妥当な」サイズのビンを 10 個作成します
- これらのビンにデータをグループ化します (実際、この部分は非常に簡単なはずです)。
物理的な間隔のヒストグラムの 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();
結果のチャート:
近づいていると思いますが、どこで間違った方向に進んでいるかはまだわかりません。