x.pg06
テーマ 情報の可視化とプログラミング
準備：
アカウントの設定の不具合修正：
※XAMPP の Apache Web Server で URL localhost が表示できない受講生が対象
受講生のアカウントの半数近くで、今回の演習がうまく進まない不具合が確認されました。
以下の方法で、設定を変更してください。
それでも、うまく動かない場合は、別途相談ください。
修正方法：
レポートフォルダ → プログラミング入門（こばし） → SetProxyOverride.reg ファイルをダブルクリック
※ 設定修正に関する 警告 が表示されますが、 「はい」 で進めてください。
コンピューターを再起動してください。
シナリオ
前振り
雨が降ったときだけ可視化される広告表現 RAINCAMPAIGN
【見えるサウンド】あらゆる科学技術で音楽を「可視化」したMVがヤバい！
情報の可視化
見えないもの（分かりにくい情報）を見えるように（分かりやすく）する工夫
イラストデザインの領域
例）
ロボットのサイズ比較（画像検索）
データの可視化
データを整理し、伝えたい情報に焦点をあてたグラフ・図表を作成する
例） Excel のグラフ作成機能
D3.js によるデータの可視化
プログラム D3.js を利用してデータをグラフ化する
D3.js 公式サイト https://d3js.org/
サンプルをいくつか見ておく
お勧め
Force-Directed States of America
D3.js は Data Driven Documents データ ドリブン ドキュメント （データ駆動文書） の作成を支援する JavaScript のライブラリです。
JavaScript は主にブラウザでWebページにプログラムによる機能を持たせるために使用するプログラム言語です。
演習内容
D3.js Gallery D3.jsを利用したグラフの作成例。ここに掲載されたプログラムを利用して、以下の２つのグラフを作成します。
Dendrogram（系統図） http://bl.ocks.org/mbostock/4063570
Chord Diagram http://bl.ocks.org/NPashaP/ba4c802d5ef68f70c019a9706f77ebf1
アカウントの設定の不具合修正：
受講生のアカウントの半数近くで、今回の演習がうまく進まない不具合が確認されました。
以下の方法で、設定を変更してください。
それでも、うまく動かない場合は、別途相談ください。
修正方法：
レポートフォルダ → プログラミング入門（こばし） → SetProxyOverride.reg ファイルをダブルクリック
※ 設定修正に関する 警告 が表示されますが、 「はい」 で進めてください。
コンピューターを再起動してください。
ツールの準備：
D3.js はWebで利用されるグラフツールです。
Webページを作成して、そこにデータとグラフ化プログラムを埋め込むと、グラフが表示される仕組みです。
今回は、ローカルPCでWebサーバを動かし、Webページを作成します。
・大学のWebサーバなど、ネットに公開されたサーバと異なり、ローカルのWebサーバに作成したコンテンツは、学外のネットからアクセスすることはできません。
・ローカルPCのサーバにコンテンツを作成するので、作成したWebページをネットにアップロードする必要はありません。
サーバの起動： 解説動画
XAMPP を起動 → Apache(Webサーバ)をStart
コントロールパネルは最小化しておく（閉じてもよい。サーバをStopしない限り、バックグラウンドでサーバは動作している）
サーバ度動作確認 アドレス localhost にブラウザでアクセス
Webページの作成： 解説動画
Webページを作成する専用のツールは使用しない。
Webページ用のコードは、エディタ（テキストエディタ）という編集ツールで作成する。
使用するエディタ Visual Studio Code Visual Studio Code早分かりガイド
※ Win版 Mac版が存在する。どちらも無償でDLして利用可能。
スタート → Visual Studio Code → Visual Studio Code
フォルダを設定する。 場所： コンピューター → D:ドライブ → XAMPP → htdocs
学籍番号のフォルダを作成
ファイル index.html を新規作成
記述内容
<!DOCTYPE html><html><head><meta charset="utf-8">
</head>
<body>学籍番号
名前
Webページを作りました
</body></html>※補足 HTML という言語でWebを作成します。 <> で囲まれた英単語は タグ と呼ばれるプログラム要素です。 全角文字の部分は、ブラウザに表示されるテキストコンテンツになります。タグはブラウザに表示されません。タグは、コンテンツの表示方法を変更するなど、ブラウザが処理する為の印です。
ブラウザ（Chrome）で表示を確認する
アドレス localhost/学籍番号
記述内容の修正： <p> パラグラフ（段落タグ） と <br>（改行タグ）の利用
<!DOCTYPE html><html><head><meta charset="utf-8">
</head><body><p>
学籍番号<br>
名前</p>適当に行をあける
<p>
Webページを<br>作りました
</p></body></html>ブラウザで index.html を再読み込みする。（リロードボタン）
※ アドレス http://localhost/3116789/ は http://localhost/3116789/index.html と通常は同じように機能する。つまり、ブラウザは index.html ファイルを表示している。
グラフの作成１： 解説動画
フォルダを作成 d3a
d3a フォルダの下に index.html を新規作成
系統図のプログラムをコピーする。 http://bl.ocks.org/mbostock/4063570
d3a フォルダの下に flare.csv を新規作成
データをコピーする。 http://bl.ocks.org/mbostock/4063570
※ CSV ファイルは、1行ごとにデータを記録（レコード）し、データの詳細項目（フィールド）はコンマで区切った形式のテキストファイルです。
※ Excel で作成した表データを CSV に変換して保存することができます。
表示を確認 アドレス localhost/学籍番号/d3a
CSVファイルのデータを差し替える
練習テーマ 名古屋文理大学の学部・学科構成グラフ
入力例）
id名古屋文理大学名古屋文理大学.情報メディア学部名古屋文理大学.情報メディア学部.情報メディア学科名古屋文理大学.健康生活学部名古屋文理大学.健康生活学部.健康栄養学科名古屋文理大学.健康生活学部.フードビジネス学科レイアウト変更のためのヒント）
文字サイズの変更
.node text { font: 10px sans-serif;}※好みで
画面のサイズの変更
<svg width="960" height="2000"></svg>※好みで
グラフの表示位置の変更
var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), g = svg.append("g").attr("transform", "translate(40,0)");※ 40を80ぐらいに
グラフのサイズの変更
var tree = d3.cluster() .size([height, width - 160]);※ 160を200ぐらいに
応用 分類図、系統図（進化図）、組織図 など、 系統図用のデータを検索などで探し、データを差し替えてみる。
グラフの作成２： 解説動画
フォルダを作成 d3b
d3b フォルダの下に index.html を新規作成
chord Diagramプログラムをコピーする。http://bl.ocks.org/NPashaP/ba4c802d5ef68f70c019a9706f77ebf1
表示を確認 アドレス localhost/学籍番号/d3b
このプログラム用のデータは、ブログラムのソースコード中に存在している。
適当にデータを修正（行を削除、名前を付け替える）
応用 複数の対象の相互関係を可視化しよう。
複数の対象 スポーツのチーム 相互関係 得失点 勝敗
複数の対象 人間 相互関係 好意
など
データ修正例）
var data = [ ['A','B',6],['B','A',4],['C','A',0],['A','C',3],['C','B',4],['B','C',7]];var colors = {"A": "#da4480","B": "#5ab449","C": "#7f5acd"};var sortOrder =["A","B","C"];円のサイズの調整について： innerRadius 内側半径 outerRadius 外側半径 の値を小さく調整する。
var ch = viz.ch().data(data) .padding(.01) .sort(sort) .innerRadius(230)
.outerRadius(250)
.duration(1000)
.chordOpacity(0.3)
.labelPadding(.03)
.fill(function(d){ return colors[d];});課題提出：
作成したグラフのスクリーンショットを作成して、WebClassにアップロードする。
授業中に作成したデータを、別のものに変更して、グラフ表示を試す（来週まで）。うまくできたら、課題を再提出して、スクリーンショットを更新する（後から提出されたファイルで採点します）。
終了方法：
・Visual Studio Code を閉じる
・XAMPP コントロールパネルから Apache を STOP する
情報の可視化ネタ：
インフォグラフィック
音・音楽の可視化
Rでコード進行を丁寧丁寧丁寧に可視化してみる（Level 1） コード進行を五度圏で可視化してみた（動作しない残念）
Gephi,Rを用いた邦楽有名アーティストの歌詞類似度可視化
ヤフー、16万曲の歌詞ビッグデータ分析で、国内500アーティストの類似性を可視化
運動と可視化
NBAゲームの「不可能な解析」を可能にした「地図の専門家」の話
ビッグデータと可視化
Google Maps APIを利用して花粉飛散データを可視化する
Tweet数の変化（バルス時）
抽象概念の可視化
参考サイト：
D3.js入門（ドットインストール）