<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>CIOを目指しつつの8makiのアレ &#187; Google Squared</title>
	<atom:link href="http://blog.8maki.jp/tag/google-squared/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.8maki.jp</link>
	<description>俺と周りの変態リタラシーを埋める</description>
	<lastBuildDate>Tue, 06 Jul 2010 00:13:57 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/tag/google-squared/feed" />
		<item>
		<title>Data VisualizeなWeb系アプリケーションまとめ</title>
		<link>http://blog.8maki.jp/2009/05/data-visualization_web.html</link>
		<comments>http://blog.8maki.jp/2009/05/data-visualization_web.html#comments</comments>
		<pubDate>Thu, 14 May 2009 02:15:53 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[proposal]]></category>
		<category><![CDATA[survey]]></category>
		<category><![CDATA[テクノロジー]]></category>
		<category><![CDATA[デザイン]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[Data Visualization]]></category>
		<category><![CDATA[Google Squared]]></category>
		<category><![CDATA[mixigraph]]></category>
		<category><![CDATA[Wolfram Alpha]]></category>
		<category><![CDATA[視覚化]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=381</guid>
		<description><![CDATA[
			
				
			
		
昨今、新しいインターフェースを採用したアプリケーションが多く出てきている印象があります。先日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ブラウザ、という構図が大きく変わりそうな気配がします。
&#8212;&#8212;&#8212;&#8212;&#8211; まとめ &#8212;&#8212;&#8212;&#8212;&#8212;

こうみると、本当に分野横断的に色々なアプローチ、アプリケーションがありますね。とはいえ、今回まとめたものだけでも、一通りのトレンドを網羅しているように思えます。つまり、新しいイノベーティブなアプリケーションには、イノベーティブなインターフェースも必須になりつつある、ということなのではないでしょうか。
【参考】
こちらのブログ↓では、扱うデータによってでData Vizualizationの視覚化アプローチを7個にまとめています。
» Data Visualization: Modern Approaches &#124; Graphics &#124; Smashing Magazine

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

]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.8maki.jp%2F2009%2F05%2Fdata-visualization_web.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2009%2F05%2Fdata-visualization_web.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>昨今、新しいインターフェースを採用したアプリケーションが多く出てきている印象があります。先日<a href="http://blog.8maki.jp/2009/05/gapminder-graph.html" target="_blank">Blog</a>でも紹介した<a href="http://graphs.gapminder.org/world/#$majorMode=chart$is;shi=t;ly=2003;lb=f;il=t;fs=11;al=30;stl=t;st=t;nsl=t;se=t$wst;tts=C$ts;sp=6;ti=1811$zpv;v=0$inc_x;mmid=XCOORDS;iid=phAwcNAVuyj1jiMAkmq1iMg;by=ind$inc_y;mmid=YCOORDS;iid=phAwcNAVuyj2tPLxKvvnNPA;by=ind$inc_s;uniValue=8.21;iid=phAwcNAVuyj0XOoBL_n5tAQ;by=ind$inc_c;uniValue=255;gid=CATID0;by=grp$map_x;scale=log;dataMin=240;dataMax=119849$map_y;scale=lin;dataMin=23;dataMax=86$map_s;sma=49;smi=2.65$cd;bd=0$inds=" target="_blank">GAPMINDER</a>ですが、こういった統計データをグラフ化して公開するサービスは、最近になって注目を集めている気がします。</p>
<p>データが溢れてしまって、次はそれを「<strong>いかにわかりやすくまとめて表示するか</strong>」に焦点が向うのは自然かもしれませんね。そこで今回は、どういったアプローチがあって、具体的にどんなアプリケーションとして実装されているのか、調べてみました。</p>
<p style="text-align: center;">
<p>【目次】</p>
<ul>
<li><a href="#2d-provider">２D（プロバイダーがデータを提供）</a>
<ul>
<li><a href="#2d-provider-db">莫大なDBからデータを提供するアプリケーション</a></li>
<li><a href="#2d-provider-con">関係性の視覚化</a></li>
</ul>
</li>
<li><a href="#2d-user">２D（ユーザーが自分のデータを表示）</a>
<ul>
<li><a href="#2d-user-help">Web上の描画支援</a></li>
<li><a href="#2d-user-brain">脳内の視覚化</a></li>
</ul>
</li>
<li><a style="text-decoration: none;" href="#3d">3D</a></li>
</ul>
<p><span style="color: #993300;"><strong>■</strong></span><span style="color: #993300;"><strong>2D（2次元）</strong></span></p>
<p>大きく分けて２Dと３Dの方向性があって、２Dはいかに2次元ブラウザ上でうまくデータを表示するか、というアプローチになるでしょう。２Dはさらに、コンテンツプロバイダー側のデータをグラフ化して提供するアプリケーションと、ユーザーのデータをWeb上でわかりやすく表現するアプリケーションの二つに分類できます。</p>
<p><span id="2d-provider" style="color: #993300;"><strong>■２D（プロバイダーがデータを提供）</strong></span></p>
<p><span id="2d-provider-db" style="color: #993300;">○莫大なDBからデータを提供するアプリケーション</span></p>
<p><a href="http://www.wolframalpha.com/index.html" target="_blank">Wolfram Alpha</a>（画像↓1枚目）と最近開発が発表された<a href="http://jp.techcrunch.com/archives/20090512what-is-google-squared-it-is-how-google-will-crush-wolfram-alpha-exclusive-video/" target="_blank">Google Squared（to Techcrunch）</a>は（画像↓2枚目）有名ですよね。前者は１０TBもの統計データを、検索キーワード（SQLのようなクエリ？）に応じて図を示してくれるアプリケーションで、5月にリリース予定です。あの数学アプリケーション<a href="http://www.wolfram.com/index.ja.html" target="_blank">Mathematica</a>の作者Wolframのプロダクトとしても有名です。<br />
<img class="aligncenter size-full wp-image-387" title="wolframalpha" src="http://blog.8maki.jp/wp-content/uploads/2009/05/wolframalpha.png" alt="wolframalpha" width="400" height="366" /></p>
<p>一方、Google Squaredの方ですが、下記の画像を見るとわかるように、Web上の検索結果をグリッド上に表示して、それぞれの結果を比較できる、というインターフェースになっています。莫大なWebデータを保有するGoogleならではのサービスですね。Google Analyticsがアクセス解析の会社を一掃したのように、巷のバーティカルサーチエンジンを恐怖に陥れるのでしょうか。</p>
<p><img class="size-full wp-image-386 aligncenter" title="googlesquared" src="http://blog.8maki.jp/wp-content/uploads/2009/05/googlesquared.jpg" alt="googlesquared" width="226" height="170" /></p>
<p>また、先日<a href="http://blog.8maki.jp/2009/05/gapminder-graph.html" target="_self">紹介</a>した<a href="http://graphs.gapminder.org/world/#$majorMode=chart$is;shi=t;ly=2003;lb=f;il=t;fs=11;al=30;stl=t;st=t;nsl=t;se=t$wst;tts=C$ts;sp=6;ti=1811$zpv;v=0$inc_x;mmid=XCOORDS;iid=phAwcNAVuyj1jiMAkmq1iMg;by=ind$inc_y;mmid=YCOORDS;iid=phAwcNAVuyj2tPLxKvvnNPA;by=ind$inc_s;uniValue=8.21;iid=phAwcNAVuyj0XOoBL_n5tAQ;by=ind$inc_c;uniValue=255;gid=CATID0;by=grp$map_x;scale=log;dataMin=240;dataMax=119849$map_y;scale=lin;dataMin=23;dataMax=86$map_s;sma=49;smi=2.65$cd;bd=0$inds=" target="_blank">GAPMINDER</a>も統計データの表示なので、こちらのアプローチに入ります。</p>
<p>→<strong>検索エンジン系</strong><br />
扱うデータが膨大なため、検索エンジンの様相を呈していくのではないでしょうか？となると、データの表示は主に今までなされてきたようなグラフ化に落ち着きそうです。それよりも、検索クエリの構文とか、検索方法といったユーザーインターフェースに改善の余地が出てきそうです。</p>
<p><span id="2d-provider-con" style="color: #993300;">○関係性の視覚化</span></p>
<p><img class="aligncenter size-full wp-image-390" title="mixigraph_mac" src="http://blog.8maki.jp/wp-content/uploads/2009/05/mixigraph_mac.png" alt="mixigraph_mac" width="400" height="318" /></p>
<p>また、検索エンジン系のアプリケーションでは対象としていない、データ同士の関係性を示そうとする試みもあります。一番わかりやすいのは<a href="http://www.fmp.jp/~sugimoto/mixiGraph/" target="_blank">mixigraph</a>ではないでしょうか？ノードとノードがあってその間をつなぐ線があるという図は、実生活ではよく目にしますが、なかなかWeb上では目にしません。</p>
<p>ただ、関係性の抽出という意味では、一つ有名な領域があります。</p>
<p>→<strong>レコメンドエンジン系</strong><br />
レコメンドエンジンです。主なレコメンドエンジンは、商品同士の関連を計算して、類似商品を表示します。サイジニアの<a href="http://www.deqwas.com/" target="_blank">デクワス</a>（画像↓）というレコメンドエンジンでは、ユーザーの指向から類似コミュニティを見つけて、そのコミュニティを利用して関連商品を出しているようです</p>
<p>。</p>
<p><img class="aligncenter size-full wp-image-391" title="deqwas" src="http://blog.8maki.jp/wp-content/uploads/2009/05/deqwas.jpg" alt="deqwas" width="302" height="200" /></p>
<p>結局mixigraphも、共通の知人や関連性の高い友人を見つるのに使うのが主な目的だと思うので、ある種レコメンドエンジンと言えますね。多くのレコメンドエンジンもmixigraphのような、ビジュアル的アプローチができる気がします。</p>
<p><span id="2d-user" style="color: #993300;"><strong>■２D（ユーザーが自分のデータを表示）</strong></span></p>
<p><span id="2d-user-help" style="color: #993300;">○Web上の描画支援</span></p>
<p><img class="aligncenter size-full wp-image-382" title="googlevisualization" src="http://blog.8maki.jp/wp-content/uploads/2009/05/googlevisualization.png" alt="googlevisualization" width="470" height="75" /></p>
<p><a href="http://code.google.com/intl/ja/apis/visualization/">Google Visualization API</a>は、ユーザーのデータをWeb上に表示する際に便利なAPIです。仕組みは簡単で、データを投げるとグラフの画像が返ってきます。また、<a href="http://www.google.com/analytics/ja-JP/" target="_blank">Google Analytics</a>や<a href="http://nakanohito.jp/" target="_blank">なかのひと</a>、といったアクセス解析ソフトも、ユーザーのデータをわかりやすく表示するアプリケーションと言えばこちらの分類ですね。</p>
<p>→<strong>API系</strong><br />
今後も自分のデータを簡単に、かつ分かりやすく示したいというニーズは増えてきそうですし、こういった描画支援系のサービスはAPIやASP/Saasといった方向で出てくるのではないでしょうか。</p>
<p><span id="2d-user-brain" style="color: #993300;">○脳内の視覚化</span><br />
<img class="aligncenter size-full wp-image-392" title="mindmapguidlines" src="http://blog.8maki.jp/wp-content/uploads/2009/05/mindmapguidlines.png" alt="mindmapguidlines" width="400" height="329" /></p>
<p>Mindmapに代表されるような、脳を整理するアプリケーション群です。これはこれで別エントリでまとめたいほど多くのアプリケーションがありますが、基本はツリー構造のアプリケーションですよね。個人的には<a href="http://www.frieve.com/feditor/" target="_blank">Frieve Editor</a>（画像↓）というのがオススメです。普通のMindmapではツリー構造しか表現できませんが、こちらは多対多の関係を表現できます。</p>
<p><img class="aligncenter size-full wp-image-393" title="frieveeditor" src="http://blog.8maki.jp/wp-content/uploads/2009/05/frieveeditor.png" alt="frieveeditor" width="400" height="248" /></p>
<p>→<strong>認知系</strong><br />
Webに限らず、多くの形が考えられそうな領域です。スライドをインタラクティブに作れるツールとか、ワークフローに特化したアプリケーションとか、それこそ無限に考えられます。けれども、人間の脳をいかに効率的に表現するか、という領域に収まる気がするので、認知系とまとめてみました。</p>
<p><span id="3d" style="color: #993300;"><strong>■</strong></span><span style="color: #993300;"><strong>3D（3次元）</strong></span></p>
<p>上記のグラフ化と一線を画すのが、３Dの方向です。２Dの、「人間が紙の上にまとめる」という考え方が、３Dでは「人間がその中で行動する」という考え方になり、よりインタラクティブなアプリケーションが出ています。</p>
<p><img class="aligncenter size-full wp-image-395" title="ifree3d" src="http://blog.8maki.jp/wp-content/uploads/2009/05/ifree3d.png" alt="ifree3d" width="400" height="326" /></p>
<p><a href="http://jp.techcrunch.com/archives/20090320visualize-data-including-google-search-results-in-3d-with-ifree3d/" target="_blank">iFree3D（to Techcrunch）</a>（画像↑）は立方体空間の中で、Webブラウジングするアプリケーションで、サイトや画像といったアイテムを、より直観的にいじれるように３Dを活用しています。ま</p>
<p>た、<a href="https://addons.mozilla.org/ja/firefox/addon/8879" target="_blank">FoxTab</a>（画像↓）というFirefox Addonも、今開いているサイトを、３Dで表示してくれます。</p>
<p><img class="aligncenter size-full wp-image-396" title="foxtab" src="http://blog.8maki.jp/wp-content/uploads/2009/05/foxtab.png" alt="foxtab" width="400" height="286" /></p>
<p>→<strong>ブラウザ系</strong><br />
これらのアプリケーションに共通しているのが、ブラウザあるいはブラウザ支援ツールということです。より実世界に近い形でWebを動き回れたらいいんじゃないか、というのは自然なアプローチはな気がします。AR（拡張現実）も注目を集めていますし、IE vs Firefox vs その他Webブラウザ、という構図が大きく変わりそうな気配がします。</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8211; まとめ &#8212;&#8212;&#8212;&#8212;&#8212;</p>
<p><img class="aligncenter size-full wp-image-420" title="datavisualize" src="http://blog.8maki.jp/wp-content/uploads/2009/05/datavisualize.png" alt="datavisualize" width="480" height="259" /></p>
<p>こうみると、本当に分野横断的に色々なアプローチ、アプリケーションがありますね。とはいえ、今回まとめたものだけでも、一通りのトレンドを網羅しているように思えます。つまり、新しいイノベーティブなアプリケーションには、イノベーティブなインターフェースも必須になりつつある、ということなのではないでしょうか。</p>
<p>【参考】<br />
こちらのブログ↓では、扱うデータによってでData Vizualizationの視覚化アプローチを7個にまとめています。</p>
<p>» <a href="http://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/" target="_blank">Data Visualization: Modern Approaches | Graphics | Smashing Magazine</a></p>
<ul>
<li>Mindmaps</li>
<li>Displaying News</li>
<li>Displaying Data</li>
<li>Displaying connections</li>
<li>Displaying Web-sites</li>
<li>Articles &amp;  Resources</li>
<li>Tools and Services</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2009/05/data-visualization_web.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2009/05/data-visualization_web.html" />
	</item>
	</channel>
</rss>
