SVGを使ってグラフを作ってみた

グラフを提供するWEBサービスは少なくありません。このため、Javascriptでグラフを作るスクリプトを書くのは車輪の再発明的であまり意味がないかも知れません。ですが、SVGを使えば割と簡単に作れそうですし、IE 9もようやくSVGをサポートしましたし、既存のグラフを提供するサービスに不満があるのでSVG(とJavascript)でグラフを書いてみました。

Firefox 3.6.10、Chrome 6.0.472.62、Safari 5.0.2、Opera 10.61では動きます。IEは全滅です(IE 9でも無理)。

下の表は、ブラウザシェアのデータです。"Draw Graph"をクリックすると、グラフが表示されます(一応、数字は変更することができます)。

また、INFOには各ブラウザのマイナーバージョンまで発表時期の情報を記載しています。Infoのチェックボックスにクリックするとバージョンの発売時期が表示されます。チェックを外せば消えます。

Graph

Info

データを見るときにグラフ化しただけで理解できるものでしょうか?

ブラウザシェアのデータを例に挙げましたが、Firefoxがシェアの鈍化した理由はデータからわかるでしょうか?外的要因によって起こったと思われますが、それをグラフに盛り込むべきではないでしょうか。Googleトレンドで検索数とニュースを並べていますが、グラフにも同様なことをしないといけないのではないでしょうか(書きすぎると意味がわからなくなりますが)。HTMLとJavascriptならば実現できると思います。

このように思って、Javascript&SVGでグラフを描いてみました。思ったよりも簡単にグラフを書くことができました。ただし、IE 9が動かないのは理由がわかりませんが。

機能不足だったり、見づらいところがあったり、APIチックに切り出すことができませんでしたが、サンプルをソース置き場のgraph_info.htmlに置きました。

【Javascript】
・N-Queen問題をWeb Workersで解いてみた(Javascript関係)
・素数をWeb Workersを作って計算してみた(Javascriptサンプル)
・File APIを使ってブラウザバージョンシェアの加工してみた(Javascriptサンプル)
・Web Wrokersを使ってマルチコアを使い尽くしてみた(Javascriptサンプル)
・白いThinkPad X100eがやってきた(加速度センサーで遊んでみた編)