SVGを利用したデータ可視化のためのグラフ作成   Leave a comment

データ可視化のためのグラフ作成を考えていて、検索サイトで調べたら、大変すばらしいグラフ作成機能を持つccchartというJavaScriptグラフライブラリィを見つけました。
下記サイトを見てもらうとわかりますが、数学的センスを感じずにはいれませんでした。またデザインセンスもとても良いと思います。大げさですが、こんなにすばらしいグラフをWEB上で実現できるとは驚きです。
ccchart(高橋 登史朗氏作成)     http://jsgt.org/c/

似たようなことをSVGで表現してみました。下のグラフは画像リンクです。画像自体はPNG形式ですが、リンク先でSVG形式の表示ができます。リンク先のソースを見てもらえば、SVGのグラフ作成は、そんなに難しくないと思います。(wordpressでは、SVGタグを使えないため、リンク先での表示になりました。またフィルター処理を行っているのでfirefoxまたは、chromeでご覧下さい。また棒グラフの棒には、ツールチップ表示するようになっています。)

下記のリンクは、FOPのバイナリ配布に含まれるサンプルプログラムの「ExampleSVG2PDF.java」を使用して直接SVGからPDF化しました。Apache FOPを使用してXSL-FOを経由してもSVG画像をPDFにできますが、フィルター処理のものをPDFにすると正しく表示されませんので注意が必要です。
棒グラフのSVGをベクター形式で埋め込んだPDF   http://okule.files.wordpress.com/2012/07/bar_chart1.pdf
(PDFで拡大表示してもきれいに表示される。)

BatikSVG Rasterizerツールでも、PDF化できますが、SVG Rasterizerツールが使用する、pdf-transcoder.jarの実装バージョンが、1.0beta2なので、PDFファイルの文書プロパティ→概要→詳細情報のPDF変換のところが、「Apache FOP Version 1.0beta2: PDF Transcoder for Batik」となるので注意が必要である。FOPのバイナリ配布に含まれるサンプルプログラムの「ExampleSVG2PDF.java」を使用すれば、「Apache FOP Version SVN tags/fop-1_0: PDF Transcoder for Batik」になります。

SVGでグラフを表現する最大の利点の一つは、ブラウザー上で拡大表示しても画質が崩れないことです。拡大してもきれいに表示されます。目の良いお客様ばかりではないので重要なことです。またグラフがとてもこまかいときに、助かります。二つ目は、XML形式なのでテキストエディタで直に作成・修正できることです。三つ目は、バイナリー形式ではなく、XML形式なので、プログラムから生成することが比較的容易であることです。

SVGを利用したグラフ作成は、データウェアハウスの情報分析ツールに応用できると思います。お客様のデータウェアハウスから、このようなグラフを作成できたら面白いと思いますし、お客様に喜んでいただけると思います。データ可視化を実現する上で、SVGによるグラフ作成は、とても重要な武器になると思います。次期IE10では、SVG フィルター処理が、標準でサポートされますので非常に楽しみです。

©中條勝徳 and okulejp.com, 2012.

広告

okule による SVG, XML への投稿 (7月 16, 2012)

タグ: , , , , ,

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。