ほぼCrossfilter.jsも使っていなかった！

とりあえず、JavaScriptで、バーチャート（行タイプの棒グラフ、Last.fmのカウントグラフの感じ）を表示したかった。その参考にしたサイトが、dc.jsやCrossfilter.jsを使っていたので、使い始めた（つもりだった）。

で、昨日、実際にはdc.jsを使っていなくて、Crossfilter.jsで集計して、d3.jsで病害していた！というところまでは気がついた。

そして、今日、さらにそのグラフ描画ソースを読んでみると、Crossfilter.jsいらないんじゃないか？ということになってきた。ソースの修正は必要になってくるが、Crossfilterライブラリでの集計やグループ化は一切やっていない。それらのすべては私はサーバサイドのSQLで実行済みなのである（現状）。

そして、順位、アーティスト名（曲名のグラフもあるので曲名のデータセットもアリ）、カウント数という3つからなるデータセットが100レコード、サーバから降りてくる。それをグラフに描画すればよいだけである。集計は必要がない。

集計してしまうと逆に、順位かキーになる名称が消えてしまう、もしくは複雑な処理になってしまう上に集計していないということになるので、意味がまったくない。

ということで、サーバサイドで集計し、JavaScript用に出力した生データの配列をそのままd3.jsで扱ってみた。順位、アーティスト名（曲名）、長さがスケールされたバーチャート、カウント数、と出力したいデータは全て出力できた。色やフォントサイズ、配置など、細かいところは詰めていないが、必要なグラフが出力できたので、勉強すべきは、オライリーの本を買った、d3.jsだけ、ということになった。かなり対象が絞られた。

今日のところで、一つ疑問点が。順位が表示できるようになったのであるが、順位が表示されない状況があるのである。画像はこの通り。

処理としては、PHPの処理で、先頭からの行番号を順位としている。が、カウント値が前の行と同じ場合は、前の行と同じ順位を表示し続ける。値が違う行になったら、順位＝行番号に戻す。というアルゴリズムで、JavaScriptのデータを作っている。PHPでグラフを描いていたときにはこのアルゴリズムで描いていた。

この画像を見ると分かるのであるが、上の行と同じ順位が割り当てられているはずの行で、順位が表示されていない。形としては、こういうグラフもあるので、アリといえばアリなのであるが、指定は全行出力のつもりなので、どこを指定したらこうなったのかは理解しておきたい。

今日はここまでの作業としておいて、細かい調整は明日以降にやりたいと思う。