używamdc.js, crossfilter.js id3.js wygenerować wykres słupkowy.

Wykres słupkowy reprezentuje dane dla transakcji kartą kredytową. Przedstawia liczbę transakcji (oś y) nad kwotą dolara transakcji (oś x).

To wygląda tak:

Tablica danych wygląda zasadniczo tak:

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

Dane są bardzo zmienne w zależności od różnych sprzedawców itp. I nie mogę przyjąć żadnych założeń dotyczących dystrybucji.

Jak widać ten wykres nie jest aż tak użyteczny z powodu samych danych. W tym przypadku jest 1 transakcja dla-$7500 i2 dookoła$7500.

Między innymi inne kwoty, ale większość transakcji skupia się wokół$0 - $100 gdzie można zobaczyć kolec.

Niestety jest wystarczająco dużo wariancji, że nie można nawet zobaczyć słupków dla rzadszych kwot transakcji.

Toodpowiedź wydaje się blisko, ale nie do końca.

To, co naprawdę chciałbym zrobić, to przełamać znaczniki osi X na 10 kawałków o rozsądnej wielkości, które grupują sumy transakcji, aby wykres był bardziej użyteczny.

Załóżmy na przykład, że w tym przypadku średnia kwota transakcji wynosi$20. A skrajne wartości min i max są-$7500 i$7500

Tak więc w tym konkretnym przykładzie chciałbym, aby oś x została podzielona tak:

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

(Rozmiar porcji / bin staje się coraz mniejszy, im bliżej średniej otrzymujemy).

Trzeba przyznać, że minęły wieki od czasu, gdy poważnie przestudiowałem statystyki, więc jestem bardzo zardzewiały. Ale wydaje mi się, że sposób, w jaki rozbijam dane na pojemniki / uchwyty, będzie miał wiele wspólnego ze standardowym odchyleniem moich danych.

Myślę, że mam dobre wyczucie tego, czego chcę, jestem trochę zagubiony w sposobie użytkowaniad3.js (d3.mean(), d3.quantile() ?) idc.js aby uzyskać histogram podobny do opisanego.

Więc jaki jest właściwy sposób lub jakich bibliotek powinienem używać do:

Utwórz 10 pojemników o „rozsądnej wielkości” zgodnie z dowolnie wybranym zestawem danychPogrupuj dane w te pojemniki (właściwie ta część powinna być całkiem prosta)

Jeśli chodzi o fizyczną oś X histogramu odstępu, nie uważam za konieczne lub pożądane, aby kleszcze były nierówno rozmieszczone (być może nie jest to już histogram).

Wolałbym, żeby kleszcze były równomiernie rozmieszczone, mimo że rozmiary kawałków nie są równe. Po prostu upewnię się, że odpowiednio zaznaczę kleszcze.

Wszelkie wskazówki we właściwym kierunku byłyby bardzo mile widziane.

Aktualizacja:

Więc wydaje sięd3.js jest kilka kroków ode mnie jak zwykle i już ma moje plecy. Wierzę, że mogę użyćd3.scale.quantile() rozbić oś x na 10 kwantyli (decyl). Rzeczywiście, ustawiłem skalę kwantyli i wydaje się, że robi to dobrze, kiedy wprowadzam liczby bezpośrednio do funkcji skali kwantyli (za pośrednictwem konsoli JS), wyprowadza poprawne wiadro (z 10).

Ale niestety mój wykres wciąż jest zawalony. Oto mój kod:

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();

i wynikowy wykres:

Myślę, że zbliżam się, ale wciąż nie jestem pewien, gdzie skręcę w złym kierunku.