<?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; Flash</title>
	<atom:link href="http://blog.8maki.jp/tag/flash/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.8maki.jp</link>
	<description>俺と周りの変態リタラシーを埋める</description>
	<lastBuildDate>Sat, 28 Jan 2012 04:05:04 +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/flash/feed" />
		<item>
		<title>グラフだけじゃない、Data Visualizationフレームワーク集</title>
		<link>http://blog.8maki.jp/2010/01/javascript-data-visualization-library-not-only-for-charts.html</link>
		<comments>http://blog.8maki.jp/2010/01/javascript-data-visualization-library-not-only-for-charts.html#comments</comments>
		<pubDate>Mon, 18 Jan 2010 23:56:01 +0000</pubDate>
		<dc:creator>8maki</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[proposal]]></category>
		<category><![CDATA[survey]]></category>
		<category><![CDATA[テクノロジー]]></category>
		<category><![CDATA[デザイン]]></category>
		<category><![CDATA[Data Visualization]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Information Presentation]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.8maki.jp/?p=585</guid>
		<description><![CDATA[
			
				
			
		
(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 &#8211; 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 &#8211; Browser Statistics DEMO
Infovis

こちらもグラフ構造のデータ描画ライブラリとして有名です。フレームワークではないので個別のVisualを利用する形になります。グラフ構造しか扱えないのですが、この手のライブラリとしては珍しく、Weighted Graph（ノード間のパスに重みが付いている）/Directed Graph（パスに方向がある）、の描画にも対応しています。現時点で5種類のグラフ系、ツリー系のVisualがありますが、どれもよくできています。
» Infovis DEMO
RGraph
番外ですが、HTML5用のグラフ生成ライブラリも登場しています。HTML5なのでまだまだ本格導入は難しいかもしれませんが、相当クオリティ高く仕上がっており、今後が楽しみなライブラリです。
» RGraph DEMO
]]></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%2F2010%2F01%2Fjavascript-data-visualization-library-not-only-for-charts.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.8maki.jp%2F2010%2F01%2Fjavascript-data-visualization-library-not-only-for-charts.html&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>(<a href="http://analyst.8maki.jp/2010/01/20/data-visualization-frameworks-not-only-for-charts/" target="_blank">8 free Data Visualization frameworks not only for charts</a> [en])</p>
<p>相変わらずData Visualization関係で調査・開発を行っているのですが、その中でJavascriptのライブラリ・フレームワークを探す時間も多いです。</p>
<p>» <a href="http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/" target="_blank">20 Fresh JavaScript Data Visualization Libraries</a></p>
<p>上記記事のようにまとめ記事が結構あって助かるのですが、ほとんどがCharts（グラフ）のライブラリなんですよね。Chartsも線グラフか、棒グラフか、円グラフか、、、みたいにライブラリ化される主要なグラフは8種類くらいしかなく、面白くない。<br />
適切なデータに対して適切なVisualを関連付けるわけですから、もっと多くのVisualが考えられてもいいはず！</p>
<p>そこでChartsに限らない、もっと根本的にData Visualizationを扱っている有名どころのフレームワークをリストアップしてみました。</p>
<h4><a href="http://www.simile-widgets.org/" target="_blank">SIMILE Widgets Exhibit</a></h4>
<p><img class="aligncenter size-full wp-image-589" title="dv-js-library-simile" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-simile.png" alt="dv-js-library-simile" width="550" height="260" /></p>
<p>MITのメディアラボがリリースしているFaceted Search用フレームワークです。HTMLを拡張したテンプレート言語を用いて、簡単にFaceted Searchと、検索結果のリッチなVisualizeを可能にしています。現在、リスト、テーブル、地図、Timeline、TimeplotといったVisualに対応しています。タブなどでVisualを切り替えられるので、ユーザーの目的にマッチした検索機能を提供することができます。</p>
<p>SIMILE Widgetsでは、他にも<a href="http://www.simile-widgets.org/timeline/" target="_blank">Timeline</a>や、<a href="http://www.simile-widgets.org/timeplot/" target="_blank">Timeplot</a>、<a href="http://www.simile-widgets.org/runway/" target="_blank">Runway(Coverflow)</a>などのVisualもAPIとして個別に提供しています。</p>
<p>» <a href="http://www.simile-widgets.org/exhibit/examples/presidents/presidents.html" target="_blank">SIMILE Widgets Exhibit &#8211; US President Search DEMO</a></p>
<h4><a href="http://vis.stanford.edu/protovis/" target="_blank">ProtoVis</a></h4>
<p><img class="aligncenter size-full wp-image-588" title="dv-js-library-protovis" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-protovis.png" alt="dv-js-library-protovis" width="550" height="260" /></p>
<p>ProtoVisはStanfordのVisualizationフレームワークです。これは巷のライブラリと違い、グラフや地図、といった単位を1つの単位として扱わず、線や面、点といったもっと細かい部品単位でVisualを作成しています。どちらかというと<a href="http://processingjs.org/" target="_blank">Processing.js</a>に近いかも。たくさんのDEMOが載っているので、それらを参考にかなり自由度の高いVisualを作成することができます。</p>
<p>» <a href="http://vis.stanford.edu/protovis/ex/" target="_blank">ProtoVis DEMO</a></p>
<h4><a href="http://flare.prefuse.org/" target="_blank">Prefuse Flare (Flash)</a></h4>
<p><img class="aligncenter size-full wp-image-591" title="dv-js-library-prefuse" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-prefuse.png" alt="dv-js-library-prefuse" width="550" height="261" /></p>
<p><a href="http://flare.prefuse.org/" target="_blank">Prefuse Flare</a>もData Visualizationのフレームワークとして有名です。<a href="http://prefuse.org/" target="_blank">Prefuse</a>は、Javaのフレームワークでしたが、今回Flashに対応しました。こちらも豊富なVisualを用意しており、SIMILE同様データ構造をしっかり設計しているので柔軟性が高く、Visualの切り替えや様々なVisualを拡張することができるようになっています。</p>
<p>また、Flashならでわの気持ちのいいインタラクションも高評価です。</p>
<p>» <a href="http://flare.prefuse.org/demo" target="_blank">Flare DEMO</a></p>
<h4><a href="hhttp://chart.inetsoft.com/" target="_blank">Style Chart</a></h4>
<p><img style="display: block; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="dv-js-library-style-charts" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-style-charts.png" alt="dv-js-library-style-charts" width="550" height="260" /></p>
<p>こちらは、javascriptでVisualのリクエストを投げるとサーバー側で画像を生成し、それを表示するというフレームワークです。Galleryを見る限りかなり豊富なVisualを扱えるようです。画像だからってアニメーションやアクションが行えないわけではなく、そこにもちゃんと対応しています。扱っているライブラリが少ない、<a href="http://chart.inetsoft.com/gallery/leSHhADy.png" target="_blank">レーダーチャート（スパイダーチャート）</a>も用意している点がいいです。</p>
<p>» <a href="http://chart.inetsoft.com/editor.html" target="_blank">Style Chart Editor(DEMO)</a><br />
» <a href="http://chart.inetsoft.com/gallery.html" target="_blank">Style Chart Gallery</a></p>
<h4><a href="http://code.google.com/p/canviz/" target="_blank">CanViz</a></h4>
<p><img class="aligncenter size-full wp-image-590" title="dv-js-library-canviz" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-canviz.png" alt="dv-js-library-canviz" width="550" height="260" /></p>
<p>有名なVisualizationフレームワークである<a href="http://www.graphviz.org/" target="_blank">Graphviz</a>のJavascript版です。主にグラフ構造のデータを描画するのに適しています。ただ、DEMOを見る限り、アニメーションやイベントの設定ができないようで、本当にVisualizeのためだけのフレームワークのようです。</p>
<p>» <a href="http://www.ryandesign.com/canviz/" target="_blank">CanViz DEMO</a></p>
<h4><a href="http://www.axiis.org/index.html" target="_blank">Axiis (Flex)</a></h4>
<p><img class="aligncenter size-full wp-image-599" title="dv-js-library-axiis" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-axiis.png" alt="dv-js-library-axiis" width="550" height="260" /></p>
<p>こちらはAdobe FlexのVisualizationフレームワークです。インタラクティブなアクションがかなりリッチに作りこまれています。下記のBrowser Statisticsは一部で話題になりましたね。かなり自由度の高いフレームワークのようです。</p>
<p>» <a href="http://www.axiis.org/examples.html" target="_blank">Axiis &#8211; Browser Statistics DEMO</a></p>
<h4><a href="http://thejit.org/" target="_blank">Infovis</a></h4>
<p><img class="aligncenter size-full wp-image-592" title="dv-js-library-infovis" src="http://blog.8maki.jp/wp-content/uploads/2010/01/dv-js-library-infovis.png" alt="dv-js-library-infovis" width="550" height="260" /></p>
<p>こちらもグラフ構造のデータ描画ライブラリとして有名です。フレームワークではないので個別のVisualを利用する形になります。グラフ構造しか扱えないのですが、この手のライブラリとしては珍しく、Weighted Graph（ノード間のパスに重みが付いている）/Directed Graph（パスに方向がある）、の描画にも対応しています。現時点で5種類のグラフ系、ツリー系のVisualがありますが、どれもよくできています。</p>
<p>» <a href="http://thejit.org/demos/" target="_blank">Infovis DEMO</a></p>
<h4><a href="http://www.rgraph.net/" target="_blank">RGraph</a></h4>
<p>番外ですが、HTML5用のグラフ生成ライブラリも登場しています。HTML5なのでまだまだ本格導入は難しいかもしれませんが、相当クオリティ高く仕上がっており、今後が楽しみなライブラリです。</p>
<p>» <a href="http://www.rgraph.net/examples/index.html" target="_blank">RGraph DEMO</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.8maki.jp/2010/01/javascript-data-visualization-library-not-only-for-charts.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.8maki.jp/2010/01/javascript-data-visualization-library-not-only-for-charts.html" />
	</item>
	</channel>
</rss>

