SVGを利用したデータ可視化のためのグラフ作成   1 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)

タグ: , , , , ,

SVGを利用したデータ可視化のためのグラフ作成」への1件のフィードバック

RSS でコメントを購読する

  1. I see you don’t monetize okulejp.com, don’t waste your traffic, you can earn extra bucks
    every month with new monetization method. This is the best adsense alternative for any type of website
    (they approve all websites), for more details simply search in gooogle: murgrabia’s tools

コメントを残す

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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