SVGを使ってグラフを作ってみた～ちょっと動く～

"SVGを使ってグラフを作ってみた"で折れ線グラフを作ってみましたが、Javascriptを使うのならば動きがあるグラフを作れるのではないかと思ってやっつけで作ってみました。

データは前回同様ブラウザシェア(NetApplications)を使います。

"Draw Graph"をクリックするとグラフが出来上がります。縦軸は前回同様シェアで、横軸が前月シェア差(今月のシェア - 先月のシェア)です。このため、0よりも右側にあればシェアが伸びたことを示し、左側にあればシェアが低下しているこを示しています。

ここで、"Move Start"をクリックすると丸があっちこっちに移動します。Monthが、現在表示される月になります。

動作検証を行ったのは、Firefox 3.6、Chrome 6.0、Safari 5.0、Opera 10.6です。IEでは動かないでしょう。

Graph

シェアと前月シェア差と関連性が高すぎるデータで作ってしまったため、動きがいまいちでした。もっと違ったデータで作ればもっと面白かったかも知れません(前回と比較するために同じデータにしました)。

例えば、ブラウザ全体とそのブラウザの最新バージョンシェアとか、OSのシェアと重ねてみるとかするともっと面白かったかも知れません。また、ブラウザ全体だとIEのシェアが大きすぎてFirefox以外目立つことができないため、ブラウザバージョンシェアベースで作ったほうがより動きが鮮明だったかも知れません。

SVGでもこの程度の動きならば問題はまったくありません。

注：2010/10/3 21:00ぐらいに動くように修正しました。

【Javascript】
・SVGを使ってグラフを作ってみた
・N-Queen問題をWeb Workersで解いてみた(Javascript関係)
・素数を Web Workersを作って計算してみた(Javascriptサンプル)
・File APIを使ってブラウザバージョンシェアの加工してみた(Javascriptサンプル)
・Web Wrokersを使ってマルチコアを使い尽くしてみた(Javascriptサンプル)