モルテックのページへようこそ

ベクターグラフィックス(SVG)により文字列・数値情報をインタラクティブに図解化(ダッシュボード化)をしています。


対象は、商店街の売上げデータから、分子物理学・分子生物学の研究データまで。
元データはテキスト形式(CSVなど)であればOK。20年前の5インチフロッピーに入っている売り上げデータでも可。
SVG技術の中でも特に『Raphael.js』というライブラリを適用しています。

初めに

データの図解化は今やデジタルサイネージや、企業内の分析データ、商店街の売り上げなどに適用され身近なものになっています。しかしながら、これらは同一の図解を複数の人、複数のデバイス、複数の画面サイズで見せるとき「いかに見易いか」 ,「いかに興味あるものに仕上げるか」,「いかに周囲の状況(環境)に併せるか」といった課題が生じています。




ExcelやPowerPointでは不十分なのは何故?


Excel,CSVといった表計算ソフトの元データといったものは特にそうですが、文字と数字の羅列を見てもツマラナイですね。


そこでモルテック(MolTech)では元データを読み込み、SVG技術の『Raphael.js』でインタラクティブ性を持たせ、そしてカラフルに表現することにより、「色気を付ける」ということを基本としています。
 元データはテキストファイル(Windows付属のメモ帳やMac付属のテキストエディットで開けるもの)であれば何でもOKです。「つまらないものを色気を付けてカッコ良く面白く!」,「画面サイズと解像度に依存せず滑らかに描画!」と、表現の幅を広げてみませんか?



サンプル(適用事例)

 ソースコードの都合上、提示サンプルにはアニメーションGIF化しているものがあります。
  凡例: アニメーションGIFにて  Raphael.js(SVG)で提示

 総務省のPDFの図をSVG化


 導線などに利用出来るアニメーション


 T4ファージのGenBank情報




ブラウザの拡大縮小機能で遊べるSVG集_1 

出典:openclipart
[TB1][TB2][TB3][TB4][TB4+]  ※2号と4号単独は何故かChromeでは拡大されない

ブラウザの拡大縮小機能で遊べるSVG集_2 

出典:wikimedia等
解像度チャートスミスチャートノギス頭部と頸椎の解剖図オシロスコープ



FAQ[Frequently Asked Questions]

Q) そもそもベクターグラフィックスって何?
Q) 利用シーンは?




ご連絡はこちらから