YUIのアニメーションを使ってグラフを描く

前回のエントリで、Many Eyesを使用してグラフを表示して見ましたが、うまくできたとは思っていません。そこで、YUIのアニメーションを使って、再度チャレンジして見ました。

データは、前回同様7社*1の2004?2006年の総収益の遷移です。横軸を総収益の前年同期比、縦軸を過去4四半期分の総収益合計*2を設定して、時間の経過を追うものです。

用いたデータは、各社のプレスリリースから抜粋し、Google Spreadsheetsの「総収益と純利益（2003?2006）」にありますので、必要でしたらアクセスしてみてください。これは、前回のエントリで使用したデータの元になっているものです*3。このため、前回と同じデータで、違う表現を試みました。

グラフは、上にいくほど、総収益の高さ(会社の規模)を、右にいくほど好調を示します。「開始」ボタンを押すと動きます。

Many Eyesの様に、デフォルトでグラフ作成をサポートするのは、一つの手法だと思いますが、多用な見せ方ができない欠点があります。現状Google Spreadsheetsは、グラフ機能はないため*4、YUIのAnimation等を使って、表現するしかありません。

ですが、Google SpreadsheetsにデータがあるとJSONでアクセスが可能なため、JavascriptとYUIさえ使いこなせれば、上記の様なサンプルは、作成可能です。

このため、Many Eyesには、ぜひともデータをアクセスするためのAPIを準備していただきたいですし、Googleには、グラフ機能を準備してもらいたいものです。

また、Google SpreadsheetsとYUIを使えば、いろいろな事ができそうな気がします。例えば、ガントチャートや、タスクリストなどが実現できるのではないかと思っています。

後、もし上記サンプルのファイルが必要でしたら、「YUIのアニメーションを用いてグラフを表現する」に置いてありますので、ご利用ください。

*1：IT系企業のIBM、HP、Dell、Microsoft、Intel、Apple、Sun。選択は、私の趣味が反映されています。
*2：過去4四半期の合計を縦軸にしたのは、季節要因による変動を少なくさせるためです。この手法が、良いか悪いかは分かりません。ついでにこのデータの評価は、論じたいところですが、このエントリの主旨と違うので...
*3：Many Eyesは、グラフを構成できるようにデータの整形をして設置していますが、今回のサンプルは、データをそのまま読み込み、ページ内でデータを整形して使用しています。
*4：近いうちにGoogle Spreadsheetsにグラフ機能が提供される可能性は、非常に高いでしょう。