近年，ビッグデータなどで言い表されているように，大量のデータを扱う仕事や場面が増えています．このような状況においては単純に1つ1つの元データを見て何かを言い表すことは不可能です．そこでデータに隠された情報をより分かりやすい形に表現する技術，すなわち情報可視化，に大きな注目が集まっています．このような観点から，本実験では情報可視化技術を用いたデータ解析の基礎を学びます．具体的には，

• 情報可視化がデータ解析にもたらす効果を実感する，
• 基礎的な情報可視化技術を学ぶ，
• 設計された情報可視化技術の良し悪しを判断する方法を学ぶ，
• JavaScriptの情報可視化ライブラリであるD3を用いて，与えられたデータセットの情報可視化を実装する，

を目指しています．そして，この実験の最終成果として，D3とオンライン上にあるデータセットを用いてオリジナルの情報可視化システムを作り，データセットにどのような関係性があるのか，どのような仮説が立てられそうか，を発表してもらいます．

本実験では基礎的な知識と実際的な技術を学ぶため，実験の前半はセミナー形式のDesign Discussionsと実習形式のHands-on Tutorialsの2つを組み合わせた形式になっています．Design Discussionsでは，情報可視化に関する基礎と学術的な知識を学びます．例えば，可視化の基礎要素(大きさ，長さ，色など)に対する人間の認識能力，様々なデータの代表的な情報可視化手法などをカバーします．一方，Hands-on Tutorialsでは，Design Discussionsで学んだことをD3を用いたプログラミングで実装することにより，具体的な例を通した学習を行い，理解を深めます．

実験の後半はCapstone ProjectとしてD3とデータセットを用いて各自で情報可視化システムを構築します．Capstone Projectは1人で行ってもよいし，2人が協力して行ってもよいものとします．ただし，2人で行う場合は，1人で行う場合と比較してその倍程度の出来の良さを求められます．また，学生間での情報やアイデアの共有・相互協力は推奨されます．

本実験では3種類の課題によって評価が決まります．

• Quick Review Assignments (18%): 第1回目から第6回目までの授業で出される小さめの課題(1時間程度で終わらせられる程度, 3% * 6)
• Capstone Project (50%): D3とオンライン上にあるデータセットを用いたオリジナルの情報可視化システムの設計と実装．最終レポートにはこのプロジェクトに関する報告が中心になります．
  • Project Milestone Report (25%): 第7回から第11回において進捗を報告するレポート (5% * 5)
  • Final Report (25%): 完成したシステムとドキュメンテーションの提出
• Project Presentation (25%): 自分で作ったシステムとそれを用いたデータ解析結果のプレゼンテーション
• Presentation Feedback (7%): ほかの人のプレゼンテーションに対するコメント

本実験を受講する場合，以下の知識，経験，および実験機器があることを想定しています．

• 基礎的なプログラミング技術がある．HTMLと，CSS，JavaScriptに関する知識があればなお良し．
• D3(http://d3js.org/)を用いたプログラミング環境が利用できるノート型パソコンがある．OSに関しては問わないが，講義担当者はWindowsを使用する．(どうしても準備できない場合はあらかじめ講義担当者に連絡すること．)
• オンライン上のドキュメントを読める程度の英語力がある．なお，デモの実装やプレゼンテーションは英語で行うことを強く推奨する．

情報可視化やインタフェースに関する知識・経験の有無は問いませんが，あれば講義内容をより理解できます．

実験中は各自のコンピュータを使用します． 実験に使用するコンピュータは毎回持ってきてください． 学科で貸し出されているものでも自分のものでも構いませんが，プログラミングに必要な環境構築は自己責任です．

本実験を受講する前に，D3をダウンロードしておいてください． 今年度の実験では，バージョン3.4.11のD3を使用します．D3.jsはこちらからダウンロードできます．また，プログラミングをするためのテキストエディタとデバッグを行うためのウェブブラウザが必要になります．ブラウザとしてはFirefoxを推奨し，講義内でもFirefoxを用いたJavaScriptのデバッグ環境の説明を行います．Chromeでも可能ですが，以下に示す準備が必要になります．各自で準備できる場合に限り使用を許可します．

Chromeはセキュリティ上の理由によりhttpなどの特定のプロトコルに沿う場合に限り，外部のファイルを読み込むことができます．このためFirefoxのように単にhtmlファイルを開くだけではD3の挙動を確認できません．

そこでローカルにWebサーバを実行する必要があります．最も手軽な方法として，Chromeのextensionを使用するものがあります．

• Web Server for Chrome: https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

上記のextensionをインストール後，Chrome App Launcherから実行するとポップアップが現れます．ここから“choose folder”をクリックし，プログラムを行っているフォルダを選択して，http://127.0.0.1:8887/にアクセスすると，httpを通してローカルのファイルにアクセスするようになり，D3等の挙動を確認することができます．

他の方法でローカルにWebサーバを実行する方法もあります(ApacheやPythonを使う)．どのような形であってもプログラムが実行可能な環境を作ることができればOKとしますが，Capstone Projectで提出するシステムではFirefoxで動作することを確認してください．

Quick Review Assignments (QRA)は各Design DiscussionsやHands-on Tutorialで学んだことを復習し，知識を身に見つけることを目的としています．各QRAは実験時間内に完了できる程度の内容で，講義担当者やTAがその場で確認します．例えば，hands-on tutorialで勉強したコードに更なる改良を加えるなどです．評価は以下のような基準で行われます．

• 3点(満点): 要求された課題を全て満たしている．
• 2点: 要求された課題を一部満たしている．
• 1点: 実験中に示された例を実装できたが，課題を終えていない．
• 0点: 実験中に示された例を全く実装できていない．欠席．

当日出席をしていて，かつ3点以外の点数であった場合，その次の授業内で再度提出する(講義担当者に見せる)機会が与えられます．この場合は再提出時の完成度に応じて点数が更新されます(例えば授業中は課題を終えることができなかったが，次の講義ではすべての課題を終えて再提出した場合は，1点から3点に変更)．

Capstone Projectでは，本実験で学んだことをベースにして，オリジナルの情報可視化システムを構築します．学術的な新規性は必須ではありませんが，本実験で示した実装例から比較して大きく違うもの，独創性のあるもの，あるいは有用性の高いものである必要があります．Capstone Projectは1人で行ってもよいし，2人が協力して行ってもよいものとします．ただし，2人で行う場合は，1人で行う場合と比較してその倍程度の出来の良さを求められます． また，学生間での情報やアイデアの共有・相互協力は推奨されます．

実装に際してはD3とHands-on Tutorialで使用したライブラリのみ，用いることを可とします．ただし，D3のAPIをそのまま利用しただけのものや，インターネット上にあるサンプルコード等に小規模の変更を加えたものは課題を提出したと認められず，Presenationも含めて自動的に0点となります．自分自身が書いたコードが大部分を占めるようでなければなりません．もしそれ以外のライブラリを使うことが必須である場合は，講義担当者に個別に相談してください．

構築するシステムはインタラクティブである必要があります． 例えば，フィルタリング(データの一部だけを選んで表示する)，ソート(様々な基準で可視化できる)，可視化方法の変更などが挙げられます．高機能である必要はありませんが，扱っているデータを解析するうえで役に立つであろう機能を実装してください．

扱うデータの大きさとしては数百件程度を最小とします． システムで使用されているデータのサイズが明らかに大きくない場合は減点となります．また多少データサイズが大きくなっても扱えるようにシステムを実装してください．

評価としては見た目の良さよりも，与えられたデータセットに対して適切な可視化手法を使っているか，データからいろんな知見を読み解くことに役に立っているか，システムがプログラマや専門家ではなくても使うことのできるものか，という点を重視します．過度に見た目にこだわるのではなく，ユーザにとって面白い情報が提示できるようなシステムを目指してください．また，マニュアルやヘルプがなくともユーザがシステムを十分に使えるようにデザインを工夫してください．

データセットはオンライン上にあるものを利用して構いません．あるいは自分で別途プログラムを書いて集めてきても構いませんが，データの信頼性が保たれていることを確認してください．データセットがないからと言って，自分で偽のデータを作ることは禁止です．実装するシステムはある特定のデータセットに対してのみ問題なく作動することを前提としてよいこととします．すなわち，ある1つのcsvファイルを読み込んで，そのデータに対して情報可視化を行うものでよいということです．あるいは，自分でデータを集める場合はある程度限られたデータサイズでよいということです．例えば，レストランのレビューを可視化するようなシステムの場合，数十軒くらいのデータを表示できるようにすることで十分です．ただし，より大きな，あるいは複雑なデータセットを扱えるシステムを構築した場合は，追加点を付与します．

プロジェクトのアイデアとしては以下のようなものが挙げられますが，本実験に関係する限りは他のテーマも大歓迎です．Capstone Projectは実験の時間内(12～15時間程度)で終わる程度の大きさのプロジェクトを想定しています．チャレンジングなものに取り組んでも構いませんが，確実に終わらせることができるものからまず始めて，進捗状況を見て徐々にシステムを大きくしていくように心がけてください．

• 日本のある1年の気候や環境を可視化するシステム(例えば，最高気温，降水量，降雪量，PM2.5の量など)
• いつくかの国の経済指標を比較できるシステム
• 長い文章のキーワードや言葉の関係性，物語の登場人物の関係性を可視化するシステム
• 英語における単語の共起関係を可視化するシステム
• レストランの評価が時間を通してどのように変化したかを可視化するシステム
• データセットから外れ値(明らかにパターンから外れているデータ点)をインタラクティブに除き，簡単な統計解析(例えば，線形回帰)を行うシステム
• ウェブサイトのアクセスログ解析システム
• ニコニコ動画のコメントを解析するシステム
• システム開発用のフレキシブルなガントチャート＆スケジュール設計システム

なお，学術的に見ても新規性が高い，あるいはその可能性がある場合で，かつある一定期間継続的にシステムの改良を行える場合，国際会議での発表を推奨します．学会発表のための支援も必要に応じて行います．

最終レポートでは今までのPMRで報告されてきたことをまとめるとともに，システムのソースコードとデータセットを提出してもらいます．プロジェクトの評価は最終的に提出されたシステムに対して行われるため，最後の授業以降に変更を加えることは問題なく，より高い点数を取るために推奨されます．最終レポートとシステムの評価は以下の基準に沿って行われます．

• 可視化のデザイン[10点]: 可視化手法が適切であるか，ユーザにとって有益な情報を示せているか，システムが一瞥で何を表示しているのかわかるか．
• インタラクションのデザイン[10点]: ユーザが知見を得るために必要なインタラクティブな機能を備えているか，インタラクションの可用性(usability)に問題がないか，専門的な知識を持たないユーザでもマニュアル等を特に必要とすることなくシステムを利用できるか．
• コードとレポートの可読性[5点]: 提出されたコードが構造的に整理されているか，小規模の変更であればある程度プログラム経験のある学生が短期間に行える(すなわちコードのどの部分に手を入れれば変更できるかがすぐにわかる)ようになっているか，レポートの説明が分かりやすく，十分になされているか．

最終回のスライド(PDF)にもいくつか細かな指示がなされていますので，必ず目を通してください．提出はhttp://submit.iis-lab.org/から行ってください．講義担当者が各自のアカウントを用意します．またこの提出用システムの使い方も授業中に説明します．説明用のスライドはこちらです．

グループで行ったプロジェクトに関しては，ソースコード・データセット等はグループのメンバーのうち誰か一人が提出していればよしとします(重複して提出する必要なし)．ただし，レポートに関しては全てのグループメンバーが個人で提出するものとします．

また所定の「表紙(本文無し)」と「報告書提出票」は別途準備室に提出する必要があります． こちらは印刷したものを提出してください．期限は同じです．

第7回から第11回に関しては実験中にシステムの実装を進めます．プロジェクトの進捗を図るため，各回の最後には進捗をまとめたレポート(Project Milestone Report; PMR)を提出してもらいます．

• 第7回: 既存システムの調査結果と実装計画に関するレポート
• 第8回: 完成したアルファバージョンのシステムに関するレポート
• 第9回: 完成したベータバージョンのシステムに関するレポート
• 第10回: Peer-reviewで得られたフィードバックのまとめとシステムの改良計画のレポート
• 第11回: 最終のデバッグに関するレポート

評価は以下のような基準で行われます．

• 5点(満点): PMRが非常に分かりやすく書かれており，かつプロジェクトに十分な進捗が認められる．
• 4点: PMRが最低限の要件を満たしている，
• 3点: PMRに一部不足がある．
• 0点: PMRに内容が認められない．未提出．欠席．

提出の際に使用すべき雛形は上の授業スケジュールのリンクからダウンロード可能です．この雛形を大きく変更する，あるいは雛形を使用していないレポートは大幅な減点となります．PMRの提出期限は当日の23:59です． ファイルはPDFに変換して提出することを強く推奨しますが，PDFに変換する方法がない場合はそのまま(doc形式)でもよいこととします．

提出はhttp://submit.iis-lab.org/から行ってください．講義担当者が各自のアカウントを用意します．またこの提出用システムの使い方も授業中に説明します．説明用のスライドはこちらです．

D3のギャラリーには非常に良い実装例がいくつもあります．アイデアを1つに絞る前に，どんな可視化技術を使っているか，どんなデータセットを使っているか，そしてどんな知見を伝えようとしているかを綿密に調査してください．以下に私が個人的に面白いと思ったものを挙げます．

• Earthquakes in Chile since 1900：　http://pnavarrc.github.io/earthquake/
• Eurozone Crisis: http://www.larsko.org/v/euc/
• Interactive choropleth of life expectancy: http://bl.ocks.org/karmi/raw/2366285/
• Social web use in 2009: http://n79.org/infographics/asg1/
• Visualizing San Francisco Home Price Ranges: http://www.trulia.com/trends/vis/pricerange-sf/
• Baby Names in England & Wales: http://names.darkgreener.com/#
• Most common birthdays: http://www.tageswoche.ch/de/2013_33/leben/569747/mit-wie-vielen-anderen-in-der-schweiz-teilen-sie-den-geburtstag.htm
• At the Democratic Convention, the Words Being Used: http://www.nytimes.com/interactive/2012/09/04/us/politics/democratic-convention-words.html
• At the National Conventions, the Words They Used: http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html
• The Facebook Offering: How It Compares: http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html
• US Budget spending: http://philogb.github.io/budgetvis/
• Le spese amministrative in Italia dal 2002 al 2008: http://www.visup.it/misc/workshop/index.htm
• BeerViz: http://seekshreyas.com/beerviz/
• Songrium: http://songrium.jp/
• Norse: http://map.ipviking.com/

データセットとしては以下のようなものが利用できますが，一般に公開されているデータであればどのようなものを用いても構いません．

• 総務省統計局データ: http://www.stat.go.jp/data/guide/download/
• 国勢調査のデータ: http://www.e-stat.go.jp/SG1/estat/GL02100104.do?tocd=00200521
• 日本人口推計: http://www.stat.go.jp/data/jinsui/2.htm
• 消費者物価指数（CPI）結果: http://www.stat.go.jp/data/cpi/1.htm
• 国税庁統計情報: https://www.nta.go.jp/kohyo/tokei/kokuzeicho/tokei.htm
• 気象庁 過去の気象データ: http://www.data.jma.go.jp/gmd/risk/obsdl/index.php
• 横浜オープンデータ: http://www.city.yokohama.lg.jp/seisaku/seisaku/opendata/catalog.html
• ニコニコデータセット: http://www.nii.ac.jp/cscenter/idr/nico/nico.html
• US Open Data: https://www.data.gov/open-gov/
• New York Open Data: https://nycopendata.socrata.com/
• European Union Open Data Portal: https://open-data.europa.eu/en/data/
• N-grams data from Corpus of Contemporary American English (COCA): http://www.ngrams.info/download_coca.asp

SVGに関しては講義内であまり深く扱いません．各自で勉強して応用することを想定しています．

• SVG要素レファレンス: https://developer.mozilla.org/ja/docs/Web/SVG/Element
• SVGの基本: http://ja.d3js.info/alignedleft/tutorials/d3/an-svg-primer/
• SVG要素の基本的な使い方まとめ: http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm
• SVGの基本演習: http://www.envinfo.uee.kyoto-u.ac.jp/user/susaki/envinfo/svg_basic.html
• SVG Tutorial: http://www.w3schools.com/svg/

データセットに不備がある，一貫性がないなど，なんらかの修正等が必要な場合，Open Refineなどのツールを利用してもよいこととします．ただし，それらを利用した場合にはレポート内にてどのような前処理を行ったかを明記してください．

• Open Refine: http://openrefine.org/

大きなファイルを読み込む際にはコードの書き方や書き順に注意が必要です．特にd3.csvやd3.jsonの外部(それらの後)に書いてある処理はこれらの関数が完了してから(データを読み切ってから)行われると決まったわけではありません．そこで，処理を明示的に逐次的にする必要があります．単純には以下のホームページの“Handling Data Loading Errors”という項目にもあるように，全てd3.csvやd3.jsonのコールバック関数の中に含めてしまうやり方があります．

• http://chimera.labs.oreilly.com/books/1230000000345/ch05.html#_data

あるいは，queue.jsなどを利用する方法もあります．

• queue()を使おう: http://daily.d3js.info/?p=587
• How do I ensure D3 finishes loading several CSVs before javascript runs?: http://stackoverflow.com/questions/13425987/how-do-i-ensure-d3-finishes-loading-several-csvs-before-javascript-runs

地図作成に必要なTopojsonは以下にありますが，必要に応じて他のリソースを使用しても構いません．ただしどこから入手したか，レポート内で明記してください．

• TopoJSON library: https://github.com/mbostock/topojson (topojson.js)
• World map: https://github.com/mbostock/topojson
• Japan map: https://github.com/dataofjapan/land

なお地理データからTopoJSONを自作する方法もありますが，Linuxベースのシステム(macを含む)でないと作業は少し大変です．

• D3.jsとTopoJSONで地図を作る: http://ja.d3js.node.ws/blocks/mike/map/
• Let's Make a Map: http://bost.ocks.org/mike/map/
• MapShaper: http://www.mapshaper.org/
• 国土交通省 国土数値情報 行政区域データ: http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03.html

自然言語処理が必要な場合，PythonのNLTKをはじめとして様々なツールがあります．しかし，多言語で実装されているので1つのシステムにするには労力(特に環境構築)が必要となります．本実験においてはこれらツールを使用して必要なデータを前処理し，情報可視化システムではそのファイルを読み込んで表示する，というもので構いません．ただしこれらツールをうまく導入し，インタラクティブに文章を処理，可視化できる場合は大きな加点とします．各ツールの使い方等は講義では紹介せず，個人で勉強してもらうことを前提にしています．

• Python NLTK: http://www.nltk.org/
• 映画「The Social Network」の脚本をNLTKで解析して遊んでみた: http://d.hatena.ne.jp/mickey24/20110212/nlp_with_the_social_network
• The Stanford Parser (Part-of-Speech tagger): A statistical parser: http://nlp.stanford.edu/software/lex-parser.shtml
• Chasen (日本語形態素解析): http://chasen-legacy.sourceforge.jp/
• TextRazor: https://www.textrazor.com/

第12回目においてはCapstone Projectの成果を発表してもらいます．各チームに8分の発表時間が与えられます．その中で以下のことを発表してください．

• プロジェクトの背景と理由: どういう経緯でこのプロジェクトをするに至ったか，このシステムがどのように有益であると考えたか，何を実現しようとしたのか．
• システムのデモ: その場でシステムが動いていることを示す．想定される使われ方とともにシステムの機能を紹介する．
• システムを使用して得られた面白い知見: データセットに含まれる情報で，システムを使ってみて初めてわかったこと，思っていたことと違っていたこと．
• システムのデザイン: 可視化方法に対する理由，利点．ほかの考えうる方法と比べてよいところはどこか．

この課題ではシステムの完成度だけではなく，プレゼンテーション自体の完成度を評価します．具体的な評価基準は以下の通りです．

• 準備の良さ[5点]: スライドやデモが綿密に準備されているか，時間制限内にプレゼンテーションを終えたか．
• 発表内容[10点]: 話に一貫性があり論理的に飛躍した点がないか，内容が細かすぎず聴衆を引き付けるものであったか．
• 発表方法[10点]: 適切なスピードでスムーズに話せたか，スライドではなく聴衆に向けて話をしていたか．

発表には各自のコンピュータを使用してもらいます．教室内のプロジェクタと接続できることをあらかじめ確認してください．特にMacを使用している人はRGBと接続するために必要なコネクタを各自で準備してください． 接続がうまくいかない場合は代替のコンピュータを用意してください．

発表順は各システムをテーマに分けたうえで決定されます．現時点の順番はこちらの通りです．

本実験では指定の教科書はなく購入の必要はありませんが，Scott Murrayの“Interactive Data Visualization for the Web”がD3に関する基本的なプログラミング方法を詳しく解説しており，薦めています．英語版のPDFはオライリー社のホームページより無料でダウンロードできます．

• http://alignedleft.com/work/d3-book
• http://chimera.labs.oreilly.com/books/1230000000345/

また，Scott Murrayはオンラインのチュートリアルも公開しており，上記の本に比較的準拠した内容になっています．

• http://alignedleft.com/tutorials/d3/
• (日本語版) http://ja.d3js.info/alignedleft/tutorials/d3/

その他インターネット上にて様々なチュートリアルや解説，プログラミング例を見つけることができます．以下にその例を挙げておきます．

• http://vadim.ogievetsky.com/IntroD3/#1

またInformation Visualizationの一般的なトピックをカバーする本として，Colin WareやEdward Tufteの本を推奨していますが，購入の必要はありません．工学部2号館内にある図書館でも閲覧することができます．

• Ware, C. (2013). Information visualization: perception for design. Elsevier.
• Tufte, E. R. (1990). Envisioning information. Graphics Press.
• Tufte, E. R. (2006). Beautiful evidence. Graphics Press.

この実験は主に海外の学部生向けInformation visualizationのコースを参考にして構成されています．参考までにそれらのコースのホームページを以下に記載します．これらホームページには学生が行ったプロジェクトも掲載されているものがあります．本実験でもそれらプロジェクトを参考にして構いません．ただしそのままコピーしたものや，少しだけ変更したもの(例えば，データセットだけを変更したもの)は認められず，剽窃とみなされる可能性があります．

• CS171 Visualization at Harvard University. http://www.cs171.org/#!index.md
• Info247 Information Visualization and Presentation at UCB. http://www.ischool.berkeley.edu/courses/i247
• CS7450 Information Visualization at Georgia Tech. http://www.cc.gatech.edu/~stasko/7450/
• HCDE411 Information Visualization at University of Washington. http://faculty.washington.edu/aragon/classes/hcde411/w13/
• CS448B Visualization at Stanford. http://www.graphics.stanford.edu/courses/cs448b-04-winter/

この実験に関して履修者からの意見を募っています．アンケートは短く数分程度で終わり，無記名式で行われます．アンケートの回答が成績に影響することはありません．またアンケートは完全に任意であり，回答がなくとも不利益を被ることはありません．これからもこのコースをよくするために皆様のご協力をお願いします．

アンケートは以下のホームページにて回答してください． http://yatani.jp/survey/index.php?sid=64583&lang=ja