Keiichiro Ono keiono

アプリケーションとしてまとめる

D3.js Advent Calendar 2013の21日目の記事です。今回はD3.jsのフォーマットや詳細技術というより、もう少し俯瞰的な視点で書いてみます。D3.jsを使う理由は、もちろん何らかのデータを可視化したいと言うことでしょうが、最終的にどのようなアプリケーションとしてまとめるかと言うゴールにはかなり幅があると思います。しかしそれでもいくつかの共通する課題が存在します。

テーブル形式のデータや、先のツールで書きだしたJSONなど、データを整えてD3.jsで使える形式として用意する事自体はそう難しいことではありません。手作業でスプレッドシートを使って作成してもいいし、スクリプト、もしくはOpenRefineなどといったツールで作成する方法もあります。そして一度D3.js内で扱える形式のデータが得られれば、それを様々な方法で可視化出来ます。そこから最終的な可視化を作成するプロセスで考えるべき事は次の二点でしょう：

最終的なアプリケーションとしてどうまとめるか
そのアプリケーションを構築するモジュールの実装

この記事では、この2つについてまとめます。

VISUALIZED FEB 6-7 NYC

（これはグループ内プレゼンのためのメモ書きですがせっかくなのでシェア。とりあえず記憶がはっきりしているうちに...)

Introduction

VISUALIZEDと言う名前の通り、可視化系のコンファレンス。技術詳細よりメタな話多め。たまにはこういうのもいいか。「公開データで社会的善を為す」的な考えの人も多い印象。その中で「データによる扇動」というダークサイドとせめぎ合ってる感じ（あくまで私感）。

テック系コンファレンスだがデザイナー系の人も多いらしく、スキニージーンズな男性やおしゃれな女性率高め。

Network export from Cytoscape 3.

	{
	"format_version" : "1.0",
	"generated_by" : "cytoscape-3.1.0",
	"target_cytoscapejs_version" : "~2.1",
	"data" : {
	"selected" : true,
	"__Annotations" : [ "" ],
	"shared_name" : "galFiltered.sif(1)",
	"SUID" : 765,
	"name" : "galFiltered.sif(1)"

	{
	"format_version" : "1.0",
	"generated_by" : "cytoscape-3.1.1",
	"target_cytoscapejs_version" : "~2.1",
	"data" : {
	"selected" : true,
	"__Annotations" : [ ],
	"shared_name" : "galFiltered.sif",
	"SUID" : 528,
	"name" : "Yeast Sample"

	{
	"format_version" : "1.0",
	"generated_by" : "cytoscape-3.1.1",
	"target_cytoscapejs_version" : "~2.1",
	"data" : {
	"selected" : true,
	"KEGG_PATHWAY_ID" : "path:hsa00100",
	"KEGG_PATHWAY_IMAGE" : "http://www.kegg.jp/kegg/pathway/hsa/hsa00100.png",
	"__Annotations" : [ ],
	"SUID" : 52,

	// Use Gists to store code you would like to remember later on
	console.log(window); // log the "window" object to the console