近年，ビッグデータなどで言い表されているように，大量のデータを扱う仕事や場面が増えています．このような状況においては単純に1つ1つの元データを見て何かを言い表すことは不可能です．そこでデータに隠された情報をより分かりやすい形に表現する技術，すなわち情報可視化，に大きな注目が集まっています．このような観点から，本実験では情報可視化技術を用いたデータ解析の基礎を学びます．具体的には，
を目指しています．この実験の最終成果として，D3とオンライン上にあるデータセットを用いてオリジナルの情報可視化システムを作り，データセットにどのような関係性があるのか，どのような仮説が立てられそうか，を発表してもらいます．
この実験はユーザインタフェースの研究を行うための基礎的技術・経験を積んでもらうことも目的としています．このため，
を達成できるように授業が設計されています．
また本講義のホームページは日本語ですが，講義内で使用される資料はすべて英語です．授業に英語で参加することも歓迎です．
| 場所 | 10/22 - 11/12: 243講義室 11/16 - 12/10: 242講義室 ただし最終回のみ電気系会議室5(2号館10階) |
|---|---|
| 時間 | 13:00 - 16:40 (途中10分間程度の休憩あり) |
| 講義担当者 | 矢谷浩司 (koji “at-mark” iis-lab.org) |
| TA | 大坪篤史，下尾波輝 (infovislab “at-mark” iis-lab.org) |
本実験では基礎的な知識と実際的な技術を学ぶため，実験の前半はセミナー形式のDesign Discussionsと実習形式のHands-on Tutorialsの2つを組み合わせた形式になっています．Design Discussionsでは，情報可視化に関する基礎と学術的な知識を学びます．例えば，可視化の基礎要素(大きさ，長さ，色など)に対する人間の認識能力，様々なデータの代表的な情報可視化手法などをカバーします．一方，Hands-on Tutorialsでは，Design Discussionsで学んだことをD3を用いたプログラミングで実装することにより，具体的な例を通した学習を行い，理解を深めます．
実験の後半はCapstone ProjectとしてD3とデータセットを用いて各自で情報可視化システムを構築します．Capstone Projectは基本的に2人ないし3名が協力して行うものとします．また，学生間での情報やアイデアの共有・相互協力は推奨されます．
本実験では3種類の課題によって評価が決まります．
本実験を受講する場合，以下の知識，経験，および実験機器があることを想定しています．
情報可視化やインタフェースに関する知識・経験の有無は問いませんが，あれば講義内容をより理解できます．
実験中は各自のコンピュータを使用します． 実験に使用するコンピュータは毎回持ってきてください． 学科で貸し出されているものでも自分のものでも構いませんが，プログラミングに必要な環境構築は自己責任です．
本実験を受講する前に，D3をダウンロードしておいてください． 今年度の実験では，バージョン3.5.6のD3を使用します．D3.jsはこちらからダウンロードできます．また，プログラミングをするためのテキストエディタとデバッグを行うためのウェブブラウザが必要になります．ブラウザとしてはFirefoxを推奨し，講義内でもFirefoxを用いたJavaScriptのデバッグ環境の説明を行います．Chromeでも可能ですが，以下に示す準備が必要になります．各自で準備できる場合に限り使用を許可します．
Chromeはセキュリティ上の理由によりhttpなどの特定のプロトコルに沿う場合に限り，外部のファイルを読み込むことができます．このためFirefoxのように単にhtmlファイルを開くだけではD3の挙動を確認できません．
そこでローカルにWebサーバを実行する必要があります．最も手軽な方法として，Chromeのextensionを使用するものがあります．
上記のextensionをインストール後，Chrome App Launcherから実行するとポップアップが現れます．ここから“choose folder”をクリックし，プログラムを行っているフォルダを選択して，http://127.0.0.1:8887/にアクセスすると，httpを通してローカルのファイルにアクセスするようになり，D3等の挙動を確認することができます．
他の方法でローカルにWebサーバを実行する方法もあります(ApacheやPythonを使う)．どのような形であってもプログラムが実行可能な環境を作ることができればOKとしますが，Capstone Projectで提出するシステムではFirefoxで動作することを確認してください．
テキストエディタはどのようなものを使ってもらっても構いませんが，コードのハイライトや自動補完，自動インデントを備えているものがよいと思います．本実験では，AtomとSublime textを推奨していますので，ダウンロードして使ってみて下さい．
| 回 | 日程(第2実験) | 日程(第3実験) | 講義内容 | |
|---|---|---|---|---|
| 第1回 | 10/22(木) | 11/16(月) | [Design Discussions] | 情報可視化とデータ解析とは？・人間の視覚的認識能力 (PDF) |
| [Hands-on Tutorial] | D3の基礎，データ読み込み，インタラクティブに統計的グラフを作成できるシステムの実装 (PDF, pivot_chart.html, data_salary2012.csv, データファイルのロードをテストするプログラム) |
|||
| 第2回 | 10/26(月) | 11/17(火) | [Design Discussions] | 時系列データを可視化する技術とその例 (PDF) |
| [Hands-on Tutorial] | Hans Roslingのグラフの実装 (PDF, scatter_plot.html, nations.json) |
|||
| 第3回 | 10/27(火) | 11/19(木) | [Design Discussions] | 地理情報を組み合わせた情報可視化技術 (PDF) |
| [Hands-on Tutorial] | 地図とデータを組み合わせた可視化技術の実装 (PDF, topojson.js, japan.html, japan.topojson, japan_population.json, us-counties.topojson, us_unemployment_rate.csv, us-county-names.csv) |
|||
| 第4回 | 10/29(木) | 11/26(木) | [Design Discussions] | ツリー・ネットワークグラフとその応用例 (PDF) |
| [Hands-on Tutorial] | ネットワークグラフ(force-directed graph)の実装 (PDF, network.html) |
|||
| [Capstone Project] | プロジェクトチーム結成，Githubのセットアップ |
|||
| 第5回 | 10/30(金) | 11/30(月) | [Design Discussions] | テキスト情報の可視化 (PDF) |
| [Capstone Project] | プロジェクト構想，既存システムの調査，ペーパープロトタイピング (PDF) |
|||
| [Project Milestone] | ペーパープロトタイプ(Ver.0)の完成 (PMR-01) |
|||
| 第6回 | 11/2(月) | 12/1(火) | [Design Discussions] | 情報可視化システムにおけるインタラクションデザイン (PDF) |
| [Capstone Project] | Peer-reviewセッション1，システム実装 (PDF) |
|||
| [Project Milestone] | システム実装方針決定，システム実装開始 (PMR-02) |
|||
| 第7回 | 11/5(木) | 12/3(木) | [Design Discussions] | よい情報可視化とは？ (PDF) |
| [Capstone Project] | システム実装 (PDF) |
|||
| [Project Milestone] | システムVer.1完成 (PMR-03) |
|||
| 第8回 | 11/9(月) | 12/7(月) | [Capstone Project] | Peer-reviewセッション2，システム実装 (PDF, ユーザビリティチェックリスト) |
| [Project Milestone] | システムの修正方針確認，システム実装 (PMR-04) |
|||
| 第9回 | 11/10(火) | 12/8(火) | [Capstone Project] | システム完成，プレゼンテーション計画・準備 (PDF) |
| [Project Milestone] | 最終のデバッグ，システムVer.2完成 (PMR-05) |
|||
| 第10回 | 11/12(木) | 12/10(木) | [Capstone Project] | プレゼンテーション & デモンストレーション (PDF) |
| 最終 | 11/26(木) | 12/24(木) | [Capstone Project] | Final Project Report提出期限 (最終レポートテンプレート) |
Quick Review Assignments (QRA)は各Design DiscussionsやHands-on Tutorialで学んだことを復習し，知識を身に見つけることを目的としています．各QRAは実験時間内に完了できる程度の内容で，講義担当者やTAがその場で確認します．例えば，hands-on tutorialで勉強したコードに更なる改良を加えるなどです．評価は以下のような基準で行われます．
当日出席をしていた場合，その次の授業内で再度提出する(講義担当者やTAに見せる)機会が与えられます．この場合は再提出時の完成度に応じて点数が更新されます(例えば授業中は課題を終えることができなかったが，次の講義ではすべての課題を終えて再提出した場合は，3点から5点に変更)．
Capstone Projectでは，本実験で学んだことをベースにして，オリジナルの情報可視化システムを構築します．学術的な新規性は必須ではありませんが，本実験で示した実装例から比較して大きく違うもの，独創性のあるもの，あるいは有用性の高いものである必要があります．Capstone Projectは原則として2名ないし3名が協力して行うものとします． これ以外のチーム構成を行う場合は講義担当者に事前に相談してください．また，学生間での情報やアイデアの共有・相互協力は推奨されます．
実装に際してはD3とHands-on Tutorialで使用したライブラリのみ，用いることを可とします．ただし，D3のAPIをそのまま利用しただけのものや，インターネット上にあるサンプルコード等に小規模の変更を加えただけものは課題を提出したと認められず，Presenationも含めて自動的に0点となります．自分自身が書いたコードが大部分を占めるようでなければなりません．もしそれ以外のライブラリを使うことが必須である場合は，講義担当者に個別に相談してください．
構築するシステムはインタラクティブである必要があります． 例えば，フィルタリング(データの一部だけを選んで表示する)，ソート(様々な基準で可視化できる)，可視化方法の変更などが挙げられます．高機能である必要はありませんが，扱っているデータを解析するうえで役に立つであろう機能を実装してください．
システムが扱うデータのサイズは最低でも数千件程度とします． 「件」の定義に関してはある程度あいまいに扱いますが，システムで使用されているデータのサイズが明らかに大きくない場合は減点となります．また多少データサイズが大きくなっても扱えるようにシステムを実装してください．
評価としては見た目の良さよりも，与えられたデータセットに対して適切な可視化手法を使っているか，データからいろんな知見を読み解くことに役に立っているか，システムがプログラマや専門家ではなくても使うことのできるものか，という点を重視します．過度に見た目にこだわるのではなく，ユーザにとって面白い情報が提示できるようなシステムを目指してください．また，マニュアルやヘルプがなくともユーザがシステムを十分に使えるようにデザインを工夫してください．
データセットはオンライン上にあるものを利用して構いません．あるいは自分で別途プログラムを書いて集めてきても構いませんが，データの信頼性が保たれていることを確認してください．データセットがないからと言って，自分で偽のデータを作ることは禁止です．実装するシステムはある特定のデータセットに対してのみ問題なく作動することを前提としてよいこととします．すなわち，ある1つのcsvファイルを読み込んで，そのデータに対して情報可視化を行うものでよいということです．あるいは，自分でデータを集める場合はある程度限られたデータサイズでよいということです．例えば，レストランのレビューを可視化するようなシステムの場合，数十軒くらいのデータを表示できるようにすることで十分です．ただし，より大きな，あるいは複雑なデータセットを扱えるシステムを構築した場合は，追加点を付与します．
プロジェクトのアイデアとしては以下のようなものが挙げられますが，本実験に関係する限りは他のテーマも大歓迎です．Capstone Projectはチームでの作業で実験の時間内(15～18時間程度 X チームの人数)に終わらせることができる程度の大きさのプロジェクトを想定しています．チャレンジングなものに取り組んでも構いませんが，確実に終わらせることができるものからまず始めて，進捗状況を見て徐々にシステムを大きくしていくように心がけてください．
なお，学術的に見ても新規性が高い，あるいはその可能性がある場合で，かつある一定期間継続的にシステムの改良を行える場合，国際会議での発表を推奨します．学会発表のための支援も必要に応じて行います．
D3のギャラリーには非常に良い実装例がいくつもあります．アイデアを1つに絞る前に，どんな可視化技術を使っているか，どんなデータセットを使っているか，そしてどんな知見を伝えようとしているかを綿密に調査してください．以下に私が個人的に面白いと思ったものを挙げます．
データセットとしては以下のようなものが利用できますが，一般に公開されているデータであればどのようなものを用いても構いません．
第5回目の授業においてはペーパープロトタイプを制作します．授業内でも説明しますが，自主的にいろいろとペーパープロトタイプの例を見て，インタラクティブなプロトタイプを作ってください．以下にペーパープロトタイプの面白い例を挙げます．
第5回から第9回に関しては実験中にシステムの実装を進めます．プロジェクトの進捗を図るため，各回の最後には進捗をまとめたレポート(Project Milestone Report; PMR)を提出してもらいます．PMRはプロジェクトチームで協力して作成し，代表者が提出するものとします．
評価は以下のような基準で行われます．
提出の際に使用すべき雛形は上の授業スケジュールのリンクからダウンロード可能です．この雛形を大きく変更する，あるいは雛形を使用していないレポートは大幅な減点となります．PMRの提出期限は当日の23:59です．ファイルはPDFに変換して提出することを強く推奨しますが，PDFに変換する方法がない場合はそのまま(doc形式)でもよいこととします．
レポートの提出はGitHubを通して行います．各自のリポジトリにPMRというディレクトリを作成し，そこに期限までにpushしておいてください．PMRは5回ありますので，何回目のレポートかファイル名を見てわかるようにしておいてください(例えば，PMR-01.pdf，PMR-02.pdf．．．など)．
第10回目においてはCapstone Projectの成果をデモ形式で発表してもらいます．デモは全体で2時間半～3時間程度を予定しています．
デモ発表開始前に自分たちが作ったシステムを各チームに30秒で紹介してもらいます．Madnessのフォーマットは以下の通りです．
Madnessは必ず参加してください．参加していないチームは自動的に5点減点となります．
デモの中では以下の点に関して説明してください．
デモの説明と質疑応答でだいたい10分弱(5分ずつくらい)で終わるように準備をしておいてください．システムのデモは自分たちのPCで行ってください．PC用の電源は講義担当者側で用意します．またデモ会場で使用する案内表を印刷して準備しておいてください．案内表はこちらからダウンロードできます．
この課題ではシステムの完成度だけではなく，プレゼンテーション自体の完成度を評価します．具体的な評価基準は以下の通りです．
評価は講義担当者とTAの計3名で行い，その平均値が最終的にチームに与えられる点数となります．
デモは時間を区切って交代で行うことになります(他の人のデモを見る時間を確保するため)．そのためチーム全員誰であってもデモができるようにしておいてください． 採点においてもチーム全員にデモをしてもらった上で行います．
デモ時間内ではほかのチームのデモも積極的に見てください．デモが始まる前に各自にポストイットを渡します．デモを見た後はそのポストイットに自分の感想やコメントを書いて，デモを行っている人に渡してください．
各学生は1票最もよかった他のチームのデモに投票ができます．デモ発表にはIIS Lab(矢谷研究室)のメンバーも見学者として参加し，彼らには3票与えられます．この票の獲得数の多い順にBest Demoを選出し，選ばれたチームには追加の点を与えます．この点数は最終の成績にボーナスとして加えられます(ただし合計が100点を超えた場合は100点に切り下げ)．同率のチームが複数いる場合には追加点の調整をしたうえで賞を与えます．
最終レポートでは今までのPMRで報告されてきたことをまとめるとともに，システムのソースコードとデータセットを提出してもらいます．プロジェクトの評価は最終的に提出されたシステムに対して行われるため，最後の授業以降に変更を加えても構いません(より高い点数を取るためにむしろ推奨されます)．最終レポートでは，
を提出してもらいます．デモビデオは3～5分程度の長さで，100MB以下のサイズにしてください(GitHubにpushできなくなってしまうため)．スクリーンキャプチャを用いてもモバイルデバイスで撮影してもOKです．ビデオは特に高解像度でなくてもかまいませんが，システムのデモの様子がはっきりとわかるようにしてください．モバイルデバイスなどで撮影するときはホワイトバランスに十分注意してください．また必要に応じてナレーションや字幕を付けてデモの内容を説明してください．
表紙と報告書提出票以外はすべてGitHub上で提出してください．講義担当者やTAがどこを見ればよいか，わかりやすいファイル構造にしておいてください．
Final Project Reportとシステムの評価は以下の基準に沿って行われます．
プロジェクト報告書ではチームの誰がどこを担当したのかを明記してください． 最終回のスライド(PDF)にもいくつか細かな指示がなされていますので，必ず目を通してください．提出はGithubで行ってください．最終レポートはチームのメンバー全員で協力して仕上げてください．ただし所定の「表紙(本文無し)」と「報告書提出票」は別途各自で準備して，準備室に提出する必要があります．期限は同じです．
本実験ではプログラミング言語としてJavaScriptを使用します．またそれに付随して，HTML，CSSを使うことになります．本実験を受けるにあたってこれらに関する前提知識は必須ではありませんが，ある程度自習してもらうことを想定しています．以下のようなリソースを利用するなどして勉強してください．
SVGに関しては講義内であまり深く扱いません．各自で勉強して応用することを想定しています．
データセットに不備がある，一貫性がないなど，なんらかの修正等が必要な場合，Open Refineなどのツールを利用してもよいこととします．ただし，それらを利用した場合にはレポート内にてどのような前処理を行ったかを明記してください．
大きなファイルを読み込む際にはコードの書き方や書き順に注意が必要です．特にd3.csvやd3.jsonの外部(それらの後)に書いてある処理はこれらの関数が完了してから(データを読み切ってから)行われると決まったわけではありません．そこで，処理を明示的に逐次的にする必要があります．単純には以下のホームページの“Handling Data Loading Errors”という項目にもあるように，全てd3.csvやd3.jsonのコールバック関数の中に含めてしまうやり方があります．
あるいは，queue.jsなどを利用する方法もあります．
地図作成に必要なTopojsonは以下にありますが，必要に応じて他のリソースを使用しても構いません．ただしどこから入手したか，レポート内で明記してください．
なお地理データからTopoJSONを自作する方法もありますが，Linuxベースのシステム(macを含む)でないと作業は少し大変です．
自然言語処理が必要な場合，PythonのNLTKをはじめとして様々なツールがあります．しかし，多言語で実装されているので1つのシステムにするには労力(特に環境構築)が必要となります．本実験においてはこれらツールを使用して必要なデータを前処理し，情報可視化システムではそのファイルを読み込んで表示する，というもので構いません．ただしこれらツールをうまく導入し，インタラクティブに文章を処理，可視化できる場合は大きな加点とします．各ツールの使い方等は講義では紹介せず，個人で勉強してもらうことを前提にしています．
本実験ではGithubを使用してコード管理，課題の提出を行ってもらいます．授業内でもGithubのセットアップや使い方も説明しますが，各自でも勉強しておいてください．
本実験では指定の教科書はなく購入の必要はありませんが，Scott Murrayの“Interactive Data Visualization for the Web”がD3に関する基本的なプログラミング方法を詳しく解説しており，薦めています．英語版のPDFはオライリー社のホームページより無料でダウンロードできます．
また，Scott Murrayはオンラインのチュートリアルも公開しており，上記の本に比較的準拠した内容になっています．
その他インターネット上にて様々なチュートリアルや解説，プログラミング例を見つけることができます．以下にその例を挙げておきます．
またInformation Visualizationの一般的なトピックをカバーする本として，Colin WareやEdward Tufteの本を推奨していますが，購入の必要はありません．工学部2号館内にある図書館でも閲覧することができます．
本実験ではペーパープロトタイピングを行います．具体的な方法に関しては授業内で説明を行いますが，参考書としては以下のものを薦めます．
情報可視化システムでは色を様々な情報に利用しますが，その際に考えておくべきポイントをまとめた資料として以下の論文があります．
HCIに関して一般的な教科書としては以下のものがあります．
この実験は主に海外の学部生向けInformation visualizationのコースを参考にして構成されています．参考までにそれらのコースのホームページを以下に記載します．これらホームページには学生が行ったプロジェクトも掲載されているものがあります．本実験でもそれらプロジェクトを参考にして構いません．ただしそのままコピーしたものや，少しだけ変更したもの(例えば，データセットだけを変更したもの)は認められず，剽窃とみなされる可能性があります．
剽窃や不適切な引用，改竄などはAcademic Misconductとして重い処分を受けます．本実験ではアイデアや実装に関してoriginalityを不正に高めるような行為を特に厳重に処罰します．例えば，
などが挙げられます．特に重大なAcademic Misconductが発見された場合，その影響度の大きさに応じて以下の罰則を与えることになります．
レポートやソースコードは誤解の生じないように十分注意して作成・管理してください．