CIOを目指しつつの8makiのアレ » デザイン

グラフだけじゃない、Data Visualizationフレームワーク集

8maki — Mon, 18 Jan 2010 23:56:01 +0000

(8 free Data Visualization frameworks not only for charts [en])

相変わらずData Visualization関係で調査・開発を行っているのですが、その中でJavascriptのライブラリ・フレームワークを探す時間も多いです。

» 20 Fresh JavaScript Data Visualization Libraries

上記記事のようにまとめ記事が結構あって助かるのですが、ほとんどがCharts（グラフ）のライブラリなんですよね。Chartsも線グラフか、棒グラフか、円グラフか、、、みたいにライブラリ化される主要なグラフは8種類くらいしかなく、面白くない。
適切なデータに対して適切なVisualを関連付けるわけですから、もっと多くのVisualが考えられてもいいはず！

そこでChartsに限らない、もっと根本的にData Visualizationを扱っている有名どころのフレームワークをリストアップしてみました。

SIMILE Widgets Exhibit

MITのメディアラボがリリースしているFaceted Search用フレームワークです。HTMLを拡張したテンプレート言語を用いて、簡単にFaceted Searchと、検索結果のリッチなVisualizeを可能にしています。現在、リスト、テーブル、地図、Timeline、TimeplotといったVisualに対応しています。タブなどでVisualを切り替えられるので、ユーザーの目的にマッチした検索機能を提供することができます。

SIMILE Widgetsでは、他にもTimelineや、Timeplot、Runway(Coverflow)などのVisualもAPIとして個別に提供しています。

» SIMILE Widgets Exhibit – US President Search DEMO

ProtoVis

ProtoVisはStanfordのVisualizationフレームワークです。これは巷のライブラリと違い、グラフや地図、といった単位を1つの単位として扱わず、線や面、点といったもっと細かい部品単位でVisualを作成しています。どちらかというとProcessing.jsに近いかも。たくさんのDEMOが載っているので、それらを参考にかなり自由度の高いVisualを作成することができます。

» ProtoVis DEMO

Prefuse Flare (Flash)

Prefuse FlareもData Visualizationのフレームワークとして有名です。Prefuseは、Javaのフレームワークでしたが、今回Flashに対応しました。こちらも豊富なVisualを用意しており、SIMILE同様データ構造をしっかり設計しているので柔軟性が高く、Visualの切り替えや様々なVisualを拡張することができるようになっています。

また、Flashならでわの気持ちのいいインタラクションも高評価です。

» Flare DEMO

Style Chart

こちらは、javascriptでVisualのリクエストを投げるとサーバー側で画像を生成し、それを表示するというフレームワークです。Galleryを見る限りかなり豊富なVisualを扱えるようです。画像だからってアニメーションやアクションが行えないわけではなく、そこにもちゃんと対応しています。扱っているライブラリが少ない、レーダーチャート（スパイダーチャート）も用意している点がいいです。

» Style Chart Editor(DEMO)
» Style Chart Gallery

CanViz

有名なVisualizationフレームワークであるGraphvizのJavascript版です。主にグラフ構造のデータを描画するのに適しています。ただ、DEMOを見る限り、アニメーションやイベントの設定ができないようで、本当にVisualizeのためだけのフレームワークのようです。

» CanViz DEMO

Axiis (Flex)

こちらはAdobe FlexのVisualizationフレームワークです。インタラクティブなアクションがかなりリッチに作りこまれています。下記のBrowser Statisticsは一部で話題になりましたね。かなり自由度の高いフレームワークのようです。

» Axiis – Browser Statistics DEMO

Infovis

こちらもグラフ構造のデータ描画ライブラリとして有名です。フレームワークではないので個別のVisualを利用する形になります。グラフ構造しか扱えないのですが、この手のライブラリとしては珍しく、Weighted Graph（ノード間のパスに重みが付いている）/Directed Graph（パスに方向がある）、の描画にも対応しています。現時点で5種類のグラフ系、ツリー系のVisualがありますが、どれもよくできています。

» Infovis DEMO

RGraph

番外ですが、HTML5用のグラフ生成ライブラリも登場しています。HTML5なのでまだまだ本格導入は難しいかもしれませんが、相当クオリティ高く仕上がっており、今後が楽しみなライブラリです。

» RGraph DEMO

モノと関連データの関係性-Semantic Webによるスキーマ定義-

8maki — Sun, 13 Dec 2009 12:42:31 +0000

前回、モノをある切り口で捉え、それを適切な表現方法にあてはめて考えるアイディア出しスタイルと、モノの関連データにVisualizationをあてはめるというData Visualizationのスタイルは、脳の構造・プロセスが同じで、分かりやすいのではないか、という記事を書きました。

» アイディアの発想法とData Visualizationは同じ構造なのではないか？

そこで今回は、上記事で言及している”モノとその関連データ”とは何なのか、深く掘り下げてみたいと思います。

規格化されたプロパティの定義

ただ、適切なプロパティと適切なVisualizationをひもづけるには、プロパティの規格化が必要です。色々な人が、バラバラのプロパティ名を用いたり、統一化されていないカテゴリをプロパティとして付与したりすると、自動化が非常に困難になります。

そこでRDFでは、Dublin Coreというメタデータ記述語彙集を用いることが推奨されています。Dublin Coreには、TitleやCreatorといった15の基本要素と呼ばれるプロパティ候補があり、これらを用いることで、情報に共通化されたメタデータ、プロパティを付与することができるようになります。

さらにこれを細分化したDCMI Metadata Termsというものも存在します。DCMI Metadata Termsでは、50個以上のプロパティが定義されています。先程の「略語」という述語（プロパティ）は、DCMI Metadata Termsのdcterms:alternativeというプロパティに置き換えることができます。

考察

このようにWeb上でデータを構造化する動きは、Semantic Webという流れの一つです。Semantic Webとは、コンピュータが理解できるように、Web上の情報に意味を付与しよう、というプロジェクトです。Data Visualizationで扱うデータをSemantic Webに合わせて構造化する方法は、現状は、割と有効だと思われます。

ただ、Semantic Webは分かりにくい上に考え方が古いので、中々浸透していません。Data Visualizationを主軸に考える場合、もっと別なデータの構造化・規格化手法を考える余地は大いにあるとは思います。

参考

こちらに、Semantic Webの概念図が載っています。コンテンツにメタデータの付与→メタデータの語彙規格化→語彙の意味把握(Ontology)→論理式を用いて結論を導く(Rules,Logic Framework)→結論の証明(Proof) という流れはいい線いっている気がしますが、先は長そうですね。

Data VisualizeなWeb系アプリケーションまとめ

8maki — Thu, 14 May 2009 02:15:53 +0000

昨今、新しいインターフェースを採用したアプリケーションが多く出てきている印象があります。先日Blogでも紹介したGAPMINDERですが、こういった統計データをグラフ化して公開するサービスは、最近になって注目を集めている気がします。

データが溢れてしまって、次はそれを「いかにわかりやすくまとめて表示するか」に焦点が向うのは自然かもしれませんね。そこで今回は、どういったアプローチがあって、具体的にどんなアプリケーションとして実装されているのか、調べてみました。

【目次】

２D（プロバイダーがデータを提供）
- 莫大なDBからデータを提供するアプリケーション
- 関係性の視覚化
２D（ユーザーが自分のデータを表示）
- Web上の描画支援
- 脳内の視覚化
3D

■2D（2次元）

大きく分けて２Dと３Dの方向性があって、２Dはいかに2次元ブラウザ上でうまくデータを表示するか、というアプローチになるでしょう。２Dはさらに、コンテンツプロバイダー側のデータをグラフ化して提供するアプリケーションと、ユーザーのデータをWeb上でわかりやすく表現するアプリケーションの二つに分類できます。

■２D（プロバイダーがデータを提供）

○莫大なDBからデータを提供するアプリケーション

Wolfram Alpha（画像↓1枚目）と最近開発が発表されたGoogle Squared（to Techcrunch）は（画像↓2枚目）有名ですよね。前者は１０TBもの統計データを、検索キーワード（SQLのようなクエリ？）に応じて図を示してくれるアプリケーションで、5月にリリース予定です。あの数学アプリケーションMathematicaの作者Wolframのプロダクトとしても有名です。

一方、Google Squaredの方ですが、下記の画像を見るとわかるように、Web上の検索結果をグリッド上に表示して、それぞれの結果を比較できる、というインターフェースになっています。莫大なWebデータを保有するGoogleならではのサービスですね。Google Analyticsがアクセス解析の会社を一掃したのように、巷のバーティカルサーチエンジンを恐怖に陥れるのでしょうか。

また、先日紹介したGAPMINDERも統計データの表示なので、こちらのアプローチに入ります。

→検索エンジン系
扱うデータが膨大なため、検索エンジンの様相を呈していくのではないでしょうか？となると、データの表示は主に今までなされてきたようなグラフ化に落ち着きそうです。それよりも、検索クエリの構文とか、検索方法といったユーザーインターフェースに改善の余地が出てきそうです。

○関係性の視覚化

また、検索エンジン系のアプリケーションでは対象としていない、データ同士の関係性を示そうとする試みもあります。一番わかりやすいのはmixigraphではないでしょうか？ノードとノードがあってその間をつなぐ線があるという図は、実生活ではよく目にしますが、なかなかWeb上では目にしません。

ただ、関係性の抽出という意味では、一つ有名な領域があります。

→レコメンドエンジン系
レコメンドエンジンです。主なレコメンドエンジンは、商品同士の関連を計算して、類似商品を表示します。サイジニアのデクワス（画像↓）というレコメンドエンジンでは、ユーザーの指向から類似コミュニティを見つけて、そのコミュニティを利用して関連商品を出しているようです

。

結局mixigraphも、共通の知人や関連性の高い友人を見つるのに使うのが主な目的だと思うので、ある種レコメンドエンジンと言えますね。多くのレコメンドエンジンもmixigraphのような、ビジュアル的アプローチができる気がします。

■２D（ユーザーが自分のデータを表示）

○Web上の描画支援

Google Visualization APIは、ユーザーのデータをWeb上に表示する際に便利なAPIです。仕組みは簡単で、データを投げるとグラフの画像が返ってきます。また、Google Analyticsやなかのひと、といったアクセス解析ソフトも、ユーザーのデータをわかりやすく表示するアプリケーションと言えばこちらの分類ですね。

→API系
今後も自分のデータを簡単に、かつ分かりやすく示したいというニーズは増えてきそうですし、こういった描画支援系のサービスはAPIやASP/Saasといった方向で出てくるのではないでしょうか。

○脳内の視覚化

Mindmapに代表されるような、脳を整理するアプリケーション群です。これはこれで別エントリでまとめたいほど多くのアプリケーションがありますが、基本はツリー構造のアプリケーションですよね。個人的にはFrieve Editor（画像↓）というのがオススメです。普通のMindmapではツリー構造しか表現できませんが、こちらは多対多の関係を表現できます。

→認知系
Webに限らず、多くの形が考えられそうな領域です。スライドをインタラクティブに作れるツールとか、ワークフローに特化したアプリケーションとか、それこそ無限に考えられます。けれども、人間の脳をいかに効率的に表現するか、という領域に収まる気がするので、認知系とまとめてみました。

■3D（3次元）

上記のグラフ化と一線を画すのが、３Dの方向です。２Dの、「人間が紙の上にまとめる」という考え方が、３Dでは「人間がその中で行動する」という考え方になり、よりインタラクティブなアプリケーションが出ています。

iFree3D（to Techcrunch）（画像↑）は立方体空間の中で、Webブラウジングするアプリケーションで、サイトや画像といったアイテムを、より直観的にいじれるように３Dを活用しています。ま

た、FoxTab（画像↓）というFirefox Addonも、今開いているサイトを、３Dで表示してくれます。

→ブラウザ系
これらのアプリケーションに共通しているのが、ブラウザあるいはブラウザ支援ツールということです。より実世界に近い形でWebを動き回れたらいいんじゃないか、というのは自然なアプローチはな気がします。AR（拡張現実）も注目を集めていますし、IE vs Firefox vs その他Webブラウザ、という構図が大きく変わりそうな気配がします。

————– まとめ —————

こうみると、本当に分野横断的に色々なアプローチ、アプリケーションがありますね。とはいえ、今回まとめたものだけでも、一通りのトレンドを網羅しているように思えます。つまり、新しいイノベーティブなアプリケーションには、イノベーティブなインターフェースも必須になりつつある、ということなのではないでしょうか。

【参考】
こちらのブログ↓では、扱うデータによってでData Vizualizationの視覚化アプローチを7個にまとめています。

» Data Visualization: Modern Approaches | Graphics | Smashing Magazine

Mindmaps
Displaying News
Displaying Data
Displaying connections
Displaying Web-sites
Articles & Resources
Tools and Services

「情報の可視化」における新しいアプローチ、2次元グラフを動画のように再生

8maki — Mon, 04 May 2009 13:24:57 +0000

最近、Data Visualization（情報の視覚化）というテーマで調べ物をすることが増えました。
ようは「データをいかに人がわかりやすく、接しやすいインターフェースで表示するか？」という意味で私は捉えていますが、非常に曖昧な言葉だと思います。Infographicsも「情報の視覚化」という意味で同義な気がします。

Data Visualizationのアプローチで、最もポピュラーなのがデータのグラフ化。Googleが検索結果にグラフを表示（via Techcrunch）するようになったのも記憶に新しいですが、データ描画検索エンジンとも言える、Wolfram Alpha（via Techcrunch）も注目を集めています。

そんな中、2次元グラフの推移を動画のように再生できるようにして、時間推移をわかりやすく表現するサイトがありました。

» GAPMINDER

デフォルトで、横軸に「一人当たりGDP」、縦軸に「寿命」がプロットされていますが、さらに横軸の下を見ると、時間軸があるのが分かります。以下で5つほど、推移をお見せします。中くらいの大きさの赤い丸が日本なので、注目して見るとおもしろいです。

↓ほとんどの国が同じような位置に。

↓欧米（オレンジ・黄色の丸）の国々が右上のほうにシフトしています。

↓日本を始めとするアジア諸国が追随しています。

↓終戦付近で、日本の寿命がものすごい勢いで落ちています。

↓高度経済成長で、日本は世界一の長寿国に。左下のアフリカ諸国の格差が目立ちます。

。実際に再生して連続で見てみるととてもわかりやすいので是ご覧ください→GAPMINDER

Data Visualization: Modern Approachesにもある通り、様々なグラフ化のアプローチが試されていますが、2次元グラフに時間軸を取り入れて時間推移もわかる3次元グラフにする、というアプローチは非常に有効なのではないでしょうか。意外に使われていないアプローチなので、取り上げてみました。

このサイト自体も、様々なデータを扱っているので、うまく使えば教育等の分野に使えそうですね。

ウェブサービスインターフェース勉強会でしゃべらせてもらいました

8maki — Mon, 08 Oct 2007 14:55:14 +0000

今回、百式の田口さんがデザイナー集めて勉強会やる、ということでなぜか僕がしゃべることになりました。

» 『ウェブサービスインターフェース勉強会』へのお誘い

全2時間の中、はじめに僕が十数分話して、次にbebitさんのWEBユーザビリティ事例紹介、最後には会議といういつもの感じです。

僕のターンでは、『出会い系に見るWEBインターフェースの今後』というテーマで、以下の4サイトのコミュニティサイトとしてどんなおもしろい機能、インターフェースがあるか、サイトレビューのような形で進めました。

詳しい内容は参加者の方がブログで書かれているので割愛。

「ウェブサービスインタフェース勉強会」に行ってきた。 (treasuring misc.)

Webインターフェース勉強会に参加してきました (ちきんぶれいん.com)

にゃりんこ：　金曜日の勉強会。⇒　翌日の朝練。

とは言えコンテンツはほとんど田口さんが用意してくれたようなもんなので、僕はいかにうまく伝えるかに専念。

プレゼンはそこそこ慣れていたと思うほうなのですが（学生にしては）、人からお金をもらって（今回は￥１０００）人前で話すというのがどれだけプレッシャーがかかるか、思い知りました。

いや、別にプレゼン自体の緊張感が増した、というわけではなくやはり、それなりのコンテンツを提供しないといけない、というプレッシャー。
ITイベントにいってつまらんかった、という経験もありますし、お客さんの満足度が低かったらどうしよう、っていう部分が一番怖かったです。
まあどっちにしろかなり緊張はしましたがｗ

飲み会や帰り際には「よかったよ」「面白かった」というお声もいただきましたが、精進必須！
田口さんからの反省メールでは

プレゼンは100点だったが、120点にするには「期待させる言葉」を効果的に使うと良いね。あと、声のトーンに強弱つけようねー。

といただきましたが、所詮学生にしては。プロとして話せるようになるにはまだまだ遠い。
「いかにうまく伝えるか」の視点も欠けていました。

高みを目指すものにとって人前で話すという壁は避けては通れないませんし！！ｗ

LOVE Cartierのサイトがイカす

8maki — Sun, 03 Jun 2007 15:08:08 +0000

via Brutus

今、地球上ではさまざまな紛争や飢餓など多くの問題を抱えています。カルティエが掲げるテーマ”LOVE”は、まさに世界中の人たちへの重要なメッセージ。”LOVE”チャリティブレスレットとともに、友情の絆、恋人同士のつながりなど愛の絆を誓いましょう。

ということで、Cartierがイカすサイトを作っています。

» Cartier – Love

本サイト/キャンペーンでは4つのテーマを掲げていて、

LOVE Stories

　クリムゾンリバー２を手がけたオリヴィエ監督のショートムービー

LOVE Gallery

　現代アーティスト作品のバーチャルアートギャラリー

LOVE Collection

　Cartierの新製品（6色ブレスレットなんかは69,300と比較的お手頃）

LOVE DAY

　来たる6月8日

　というラインナップ。ちなみにこのコレクションの売り上げの10％がチャリティ団体に寄付されるそうです。

私は特にGalleryに注目で、マサチューセッツ工科大学メディア研究室の教授：ジョン・マエダ氏が今回参加するアーティスト作品をコーディネートするらしい。

テーマは『人間とコンピュータの調査』

非常に興味深い分野です。WEBデザイナー必見。
（今回のサイトもこの方が手がけている。）

と、久々にワクワクさせるようなデザイナーズサイトに出会えたのでご紹介しました。

”ジョン・マエダのクリエーションによる比類なきバーチャル体験”

ブランドのWEB業界への参入は今まではあまり目に付いてきませんでしたが、これからはおもしろいことがおきそうな予感。最近WEBに限らず大いにブランディングが大事だと実感します。まあブランディングとマーケティングを混同してはいけませんけどね。

いづれにせよWEBやるにもデザイン力が欠かせなくなる、ということだと思います。以前百式の田口さんも「デザインセンスのあるエンジニアって貴重だよねー」っておっしゃってたそうです。いやはや今後は必須課題となるかもしれませんね。

» カルティエから華奢（きゃしゃ）ひもブレス – アクセサリー – @zinoスクープ＆フォーカス