授業概要
本授業のテーマはデータ・ビジュアライゼーション（データの視覚化）である。
プログラミング言語を習得するということは、どのような行為なのだろうか。何のためにプログラミング言語を学習するのだろうか。将来プログラマー（エンジニア）になるため？ゲームを開発するため？何となくやっておいておいたほうが良さそう？
プログラミング言語学習の授業は、一般的に言語そのものを学習することが主眼に置かれ、往々にしてただアルゴリズムを学習するものや、お絵かきの授業になることが多い。もちろん、それでも言語学習の目的さえ達成できればいいという考え方もあるがが、果たしてそれだけでいいのだろうか。プログラミング言語を習得した後、この言語をどのように使ったらいいのだろうか。
これらの問題に対する回答として、本授業ではプログラミング言語を「目的を達成するための表現手段」および「社会問題を分析するためのツール」として捉える。
本授業では、データ・ビジュアライゼーションの基本となるビジュアルデザインとプログラミングを2本の柱とし、前半にビジュアルデザイン、後半にプログラミング実習を行う。そして、最終的にデータ・ビジュアライゼーションの手法を利用して社会問題を可視化する。
授業のプロセス
●STEP1
インフォメーションデザインの基礎的な要素となる形態、色彩、タイポグラフィ（文字組のデザイン）を行い、その結果としてのダイアグラムデザイン（図のデザイン）を行う。これらの実習をもとにして、インフォメーション・グラフィックスを作成する。
●STEP2
プログラミング言語の実習をおこなう。データ・ビジュアライゼーション用に最適化された、javaScriptのライブラリであるd3.jsを使用する。
●STEP3
これまでの実習をもとにして、自身でテーマを設定し、データ・ビジュアライゼーションを行う。
スケジュール
10/2 ガイダンス（対面）
簡単なワークショップ（2人の会話を5分間録音する）
10/9 色彩
彩度と明度のワークショップ
色とイメージのワークショップ
10/16 タイポグラフィ（対面）
10/30 10/23 形態（対面）
11/6 10/30 インフォグラフィックス
都道府県別のデータを使って、グラフおよび日本地図を作成する。
参考サイト：
統計局ホームページ http://www.stat.go.jp/
農林水産省の統計 http://www.maff.go.jp/j/tokei/index.html
11/13 11/6 中間課題講評・プログラミング実習1 (html)（対面）
11/20 11/13 プログラミング実習2 (D3.js)（対面）
11/27 11/20 プログラミング実習3
12/4 11/27 プログラミング実習4
12/11 12/4 プログラミング実習5
12/18 12/11 プログラミング実習6
最終課題制作
12/23 最終講評（3, 4限）オンライン
課題
■小課題2
まず、インターネットから土の画像を集め、幅100 x 高さ200ピクセルの画像をサンプリングする。その際、既存の著作権には十分配慮すること。
サンプリングしたカラーサンプルを、明度順、彩度順に並び替え、それぞれ10個のグラデーションを作成する。
目標
- 彩度、明度の微細な違いをコントロールできるようにする
注意点
- 明度の場合は、左端が1番明度が低く、右端が1番明度が高くなるように配置する。色相・彩度は一定。
- 彩度の場合は、左端が1番彩度が低く、右端が1番彩度が高くなるように配置する。色相・明度は一定。
- サンプリングする場合は、なるべく解像度の高い画像を選ぶ。
■小課題3
英語の名刺を作成する
左にローマン体を使ったレイアウト。右にサンセリフ体を使ったレイアウトを行う。重要な点は、限られた条件で一書体のファミリーを使ってどれだけ変化を出せるか。
テンプレート
- 各レイアウトにそれぞれ1書体だけ使う。ファミリーの使用は自由。画面上の構成要素は文字のみ。また、文字の縦横の比率は変えない。回転はOK。
- ローマン体はBaskerville、Bodoni、Minion、Times、サンセリフ体はAvenir (Next)、Gill Sans、Helvetica (Neue)、Myriadの中から選ぶ。
- 使用する色は白黒のみ（グレーは使わない）。背景を黒にすることはOK。サイズは90mm x 55mm以内。
- 自分の氏名はスペーシング（カーニング）を行う。
- 必ず入れる要素は、氏名、大学の住所と電話番号。メールアドレス。その他に入れたい人は他の情報を入れても構わない。
- pdfで提出。
- 大学の情報は以下の通り。
2-9-5 Honcho, Nakano, Tokyo
164-8678, Japan
Phone：03-3372-1321
Fax：03-3372-1330
■小課題4
アクセスマップを作る
中野坂上駅から東京工芸大学中野キャンパスまでのアクセスマップを作成する。
- Adobe Illustratorで作成する。A4アートボード中央に15x15cmの正方形を作成し、その中に地図を作成する。
- 使用できる色は黒か白のみ。
- 1号館から6号館（新校舎）まで地図に入れる。4号館は描いても描かなくてもいい。https://www.t-kougei.ac.jp/guide/campus/nakano/
- 中野坂上駅からの道順はいくつか考えられるので、自分の好きな道順を選び、一号館までの道順が分かるようにする。
- ランドマークは独自に選んでも構わない。
■中間課題
日本国内の統計（例：人口、人口密度、河川の水質、タレントの出身地など）をもとにして、都道府県別の日本地図を作成する。その際、地図は必ずしも実際の形である必要は無く、情報を整理するために変形してかまわない。
●条件
- 必ず、2種類の情報を組み合わせて地図を作ること。2種類の情報は何らかの相関関係（比例・反比例など）があることが望ましい。例：ゴミの排出量と不法投棄の比率
- 必ず作品の右下に引用元を明記する事
- 使用ソフト： Adobe Illustrator
- 用紙サイズ：A4縦横自由
●ポイント
- 扱う2つの情報の相関性
- 単位をどのように区切るか
- それぞれの情報を何に置き換えるか（色？形？大きさ？）
●情報地図を作る時のポイント
- 地図の大きさや説明部分のレイアウトを考え、窮屈なレイアウトにならないようにする
- 色は、なるべく違いが分かるように差をつける
■最終課題
2種類以上のデータを用いて、インタラクションにより比較できるプログラムを作成する。
条件：
- データの例：10年前、20年前と現在の東京都の1年間の気温の比較。違う年度の都道府県別データ。都道府県の貯蓄額と幸福度。など。
- 情報を比較することによって、新たな発見があるといい。
- インタラクションの例：ボタン（テキスト）を押すと、表示するデータが切り替わる。
- D3.jsとデータベース（CSV）を使用すること。
- データの収集は、必ず一次情報（オリジナルのデータ）を探し、作品中で出典元を明記すること。
- ブラウザでプレゼンテーションすること。
- ソートの機能をつけてもいい。
評価
出席率 50%、小課題 15%、中間課題 15%、 最終課題 20%
みなさんの理解度を見ながら小課題の数が増減することがあります。上記の配点はあくまで目安です。