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

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

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

この実験はユーザインタフェースの研究を行うための基礎的技術・経験を積んでもらうことも目的としています．このため，

• インタフェースデザインにおける重要なヒューリスティックスの理解と知識の習得，
• ユーザインタフェースのデザイン・開発プロセスの体験，
• インタラクティブなシステム開発におけるクイックプロトタイピングの実践，
• ソースコード管理システムであるGithubの習熟，

を達成できるように授業が設計されています．

また本講義のホームページは日本語ですが，講義内で使用される資料はすべて英語です．授業に英語で参加することも歓迎です．

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

実験の後半はCapstone ProjectとしてD3とデータセットを用いて各自で情報可視化システムを構築します．Capstone Projectは基本的に2人ないし3名が協力して行うものとします．また，学生間での情報やアイデアの共有・相互協力は推奨されます．

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

• Quick Review Assignments (20%): 第1回目から第4回目までの授業で出される課題(1~2時間程度で終わらせられる程度, 5% X 4)
• Capstone Project (55%): D3とオンライン上にあるデータセットを用いたオリジナルの情報可視化システムの設計と実装．最終レポートにはこのプロジェクトに関する報告が中心になります．
  • Project Milestone Report (15%): 第5回から第9回において進捗を報告するレポート(3% X 5)
  • Final Report (40%): 完成したシステムとプロジェクト報告書の提出
• Project Presentation (25%): 構築したシステムとそれを用いたデータ解析結果のデモプレゼンテーション

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

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

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

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

本実験を受講する前に，D3をダウンロードしておいてください． 今年度の実験では，バージョン3.5.6の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で動作することを確認してください．

テキストエディタはどのようなものを使ってもらっても構いませんが，コードのハイライトや自動補完，自動インデントを備えているものがよいと思います．本実験では，AtomとSublime textを推奨していますので，ダウンロードして使ってみて下さい．

• Atom: https://atom.io/
• Sublime Text: http://www.sublimetext.com/

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

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

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

Capstone Projectでは，本実験で学んだことをベースにして，オリジナルの情報可視化システムを構築します．学術的な新規性は必須ではありませんが，本実験で示した実装例から比較して大きく違うもの，独創性のあるもの，あるいは有用性の高いものである必要があります．Capstone Projectは原則として2名ないし3名が協力して行うものとします． これ以外のチーム構成を行う場合は講義担当者に事前に相談してください．また，学生間での情報やアイデアの共有・相互協力は推奨されます．

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

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

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

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

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

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

• 日本のある1年の気候や環境を可視化するシステム(例えば，最高気温，降水量，降雪量，PM2.5の量など)
• いつくかの国の経済指標を比較できるシステム
• 長い文章のキーワードや言葉の関係性，物語の登場人物の関係性を可視化するシステム
• 英語における単語の共起関係を可視化するシステム
• レストランの評価が地域や時間でどのように変化したかを可視化するシステム
• 俳優やタレント，アニメのキャラクターの共演関係や人気度を可視化するシステム
• 音楽の様々な情報を可視化し，楽しい音楽鑑賞を支援するシステム
• ニコニコ動画のコメントやタグを解析するシステム
• データセットから外れ値(明らかにパターンから外れているデータ点)をインタラクティブに除き，簡単な統計解析(例えば，線形回帰)を行うシステム
• ファッションにおけるカラーコーディネートの変化を可視化するシステム
• ソーシャルネットワーク上のつながりやコミュニケーションを可視化するシステム
• スポーツの勝敗情報や，選手の成績を比較できるようにするシステム

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

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/
• 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/
• Norse: http://map.ipviking.com/
• Music Timeline: http://research.google.com/bigpicture/music/#
• See the State of The Union address minute by minute on Twitter: http://twitter.github.io/interactive/sotu2014/#p1

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

• 総務省統計局データ: 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

第5回目の授業においてはペーパープロトタイプを制作します．授業内でも説明しますが，自主的にいろいろとペーパープロトタイプの例を見て，インタラクティブなプロトタイプを作ってください．以下にペーパープロトタイプの面白い例を挙げます．

• Hanmail Paper Prototype: https://www.youtube.com/watch?v=GrV2SZuRPv0
• Runsil - Games Paper Prorotype: https://www.youtube.com/watch?v=x48qOA2Z_xQ
• Example Usability Test with a Paper Prototype: https://www.youtube.com/watch?v=9wQkLthhHKA
• Paper Prototyping Blood Test Kiosk: https://www.youtube.com/watch?v=_g4GGtJ8NCY
• Game Design Fundamentals - Game Paper Prototyping: https://www.youtube.com/watch?v=k-nfWQLmlMk
• Paper Prototype Demonstration - Angry Birds Mobile App Redesign: https://www.youtube.com/watch?v=pvg8GpdQZSQ
• Wizard of Oz - Paper Prototype: https://www.youtube.com/watch?v=n-ErHPCvcDU
• IS Assignment 1 - Paper Prototype Visualization Graph: https://www.youtube.com/watch?v=Iog4S9xTgck
• Paper Prototype - Graph Visualisation: https://www.youtube.com/watch?v=XPUKmRFB6-w
• IS3 - Paper Prototype: https://www.youtube.com/watch?v=c46iytvV_Nk

第5回から第9回に関しては実験中にシステムの実装を進めます．プロジェクトの進捗を図るため，各回の最後には進捗をまとめたレポート(Project Milestone Report; PMR)を提出してもらいます．PMRはプロジェクトチームで協力して作成し，代表者が提出するものとします．

• 第5回: 制作したペーパープロトタイプに関するレポート
• 第6回: Peer-reviewでもらった意見のまとめ，実装計画に関するレポート
• 第7回: システムの実装状況に関するレポート
• 第8回: Peer-reviewでもらった意見のまとめ，システム改良方針に関するレポート
• 第9回: 最終のデバッグに関するレポート

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

• 3点(満点): PMRが分かりやすく書かれており，かつプロジェクトに十分な進捗が認められる．
• 2点: PMRが要件を満たしていて，プロジェクトに進捗が認められる．
• 1点: PMRの内容に一部不足がある，もしくは進捗が不十分である．
• 0点: 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のフォーマットは以下の通りです．

• 発表時間は30秒(30秒でプレゼンテーション打ち切り)
• スライドは1枚のみ使用可能(使用しなくともよい)
  • スライドのアスペクト比は4対3とすること．
  • アニメーションや音声，ビデオはいれないこと．
  • ファイル形式はPDF．
  • デモ発表前日23:59までにTAにメールで送信すること．メールのタイトルを「情報可視化実験Madnessスライド([チーム名])」とすること．
  • ファイルサイズが1MBを超えるものは，Githubやクラウドサービスを利用して送ること．
• 発表人数はチームで決めてよい(全員でも1人でもOK)

Madnessは必ず参加してください．参加していないチームは自動的に5点減点となります．

デモの中では以下の点に関して説明してください．

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

デモの説明と質疑応答でだいたい10分弱(5分ずつくらい)で終わるように準備をしておいてください．システムのデモは自分たちのPCで行ってください．PC用の電源は講義担当者側で用意します．またデモ会場で使用する案内表を印刷して準備しておいてください．案内表はこちらからダウンロードできます．

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

• 発表内容[5点]: 話に一貫性があり論理的に飛躍した点がないか，内容が細かすぎず聴衆を引き付けるものであったか．
• デモ内容[10点]: システムがエラーなく動いているか，聴衆が惹きつけられるデモを行っているか，わかりやす例を取り入れながらデモを行っているか．
• 質疑応答[10点]: 質問に対して適切かつ簡潔に答えられているか．

評価は講義担当者とTAの計3名で行い，その平均値が最終的にチームに与えられる点数となります．

デモは時間を区切って交代で行うことになります(他の人のデモを見る時間を確保するため)．そのためチーム全員誰であってもデモができるようにしておいてください． 採点においてもチーム全員にデモをしてもらった上で行います．

デモ時間内ではほかのチームのデモも積極的に見てください．デモが始まる前に各自にポストイットを渡します．デモを見た後はそのポストイットに自分の感想やコメントを書いて，デモを行っている人に渡してください．

各学生は1票最もよかった他のチームのデモに投票ができます．デモ発表にはIIS Lab(矢谷研究室)のメンバーも見学者として参加し，彼らには3票与えられます．この票の獲得数の多い順にBest Demoを選出し，選ばれたチームには追加の点を与えます．この点数は最終の成績にボーナスとして加えられます(ただし合計が100点を超えた場合は100点に切り下げ)．同率のチームが複数いる場合には追加点の調整をしたうえで賞を与えます．

• Gold Demo (票獲得数1位): 追加点として10点
• Silver Demo (票獲得数2位): 追加点として5点
• Bronze Demo (票獲得数3位): 追加点として2点

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

• ソースコード
• データセット
• デモビデオ
• プロジェクト報告書
• 「表紙(本文無し)」と「報告書提出票」(準備室にチームのメンバー各自が提出)

を提出してもらいます．デモビデオは3～5分程度の長さで，100MB以下のサイズにしてください(GitHubにpushできなくなってしまうため)．スクリーンキャプチャを用いてもモバイルデバイスで撮影してもOKです．ビデオは特に高解像度でなくてもかまいませんが，システムのデモの様子がはっきりとわかるようにしてください．モバイルデバイスなどで撮影するときはホワイトバランスに十分注意してください．また必要に応じてナレーションや字幕を付けてデモの内容を説明してください．

表紙と報告書提出票以外はすべてGitHub上で提出してください．講義担当者やTAがどこを見ればよいか，わかりやすいファイル構造にしておいてください．

Final Project Reportとシステムの評価は以下の基準に沿って行われます．

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

プロジェクト報告書ではチームの誰がどこを担当したのかを明記してください． 最終回のスライド(PDF)にもいくつか細かな指示がなされていますので，必ず目を通してください．提出はGithubで行ってください．最終レポートはチームのメンバー全員で協力して仕上げてください．ただし所定の「表紙(本文無し)」と「報告書提出票」は別途各自で準備して，準備室に提出する必要があります．期限は同じです．

本実験ではプログラミング言語としてJavaScriptを使用します．またそれに付随して，HTML，CSSを使うことになります．本実験を受けるにあたってこれらに関する前提知識は必須ではありませんが，ある程度自習してもらうことを想定しています．以下のようなリソースを利用するなどして勉強してください．

• Codecademy: https://www.codecademy.com/courses/html-javascript-css/0/1
• w3schools: http://www.w3schools.com/
• ドットインストール JavaScript入門: http://dotinstall.com/lessons/basic_javascript_v2
• JavaScript入門: http://www.ajaxtower.jp/js/

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/

本実験ではGithubを使用してコード管理，課題の提出を行ってもらいます．授業内でもGithubのセットアップや使い方も説明しますが，各自でも勉強しておいてください．

• GitHub Interactive Tutorial (GitHubの基本的な使い方のInteractiveチュートリアル): https://try.github.io/
• Learn Git Branching (Gitのブランチ操作についてアニメーション付きでわかりやすく学べるサイト): http://pcottle.github.io/learnGitBranching/
• Git Book (Gitが公開している無料で読めるオンライン本(日本語もあり)): http://git-scm.com/book/ja/v1
• こわくないGit (Branch, Rebase, Mergeなど初心者にとってちょっととっつきにくいポイントについてのわかりやすいスライド): http://www.slideshare.net/kotas/git-15276118/
• いまさら聞けないgitの使い方 (基本的なコマンドや使い方がまとまっています):http://qiita.com/mountcedar/items/682743c95fd3b8fc274b

本実験では指定の教科書はなく購入の必要はありませんが，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.

本実験ではペーパープロトタイピングを行います．具体的な方法に関しては授業内で説明を行いますが，参考書としては以下のものを薦めます．

• Greenberg, S., Carpendale, S., Marquardt, N., & Buxton, B. (2011). Sketching user experiences: The workbook. Elsevier.

情報可視化システムでは色を様々な情報に利用しますが，その際に考えておくべきポイントをまとめた資料として以下の論文があります．

• Few, S. (2008) Practical Rules for Using Color in Charts. http://www.perceptualedge.com/articles/visual_business_intelligence/rules_for_using_color.pdf

HCIに関して一般的な教科書としては以下のものがあります．

• Alan, D., Janet, F., Gregory, A., & Russell, B. (2004). Human-computer interaction. England: Pearson Education Limited.
• Preece, J., Sharp, H., & Rogers, Y. (2015). Interaction Design-beyond human-computer interaction. John Wiley & Sons.

この実験は主に海外の学部生向け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/

剽窃や不適切な引用，改竄などはAcademic Misconductとして重い処分を受けます．本実験ではアイデアや実装に関してoriginalityを不正に高めるような行為を特に厳重に処罰します．例えば，

• インターネット上にあるライブラリやサンプルのソースコードを引用することなく用いた，
• 他人の書いたソースコードを無断かつ引用なしに転用した，
• データセットの元となるサイトの情報を隠して自分たちが作ったように見せた，
• ほかの学生が書いたコードやデータセットを無断で使用した，
• プレゼンテーションが見栄え良くなるように，データセットの内容を根拠なく変更した，

などが挙げられます．特に重大なAcademic Misconductが発見された場合，その影響度の大きさに応じて以下の罰則を与えることになります．

• 不正が見つかった課題を不採点(0点扱い，既採点の場合は採点取り消し)，
• 今までに提出されたすべての課題を不採点，
• 今までに提出されたすべての課題を不採点，かつ以降の課題提出を認めない．

レポートやソースコードは誤解の生じないように十分注意して作成・管理してください．