pg12
テーマ 情報の可視化とプログラミング
2019年度用ネタ： 男女平等に関するアンケート https://dataexplorer.womenwill.com/intl/ja_jp/thedivide/
2019年度用ネタ： プログラム言語の５０年間の変遷 https://twitter.com/_kobashi/status/1199074410071642112
日本の都市人口の１５０年間の変遷 https://twitter.com/_kobashi/status/1199074410071642112
準備（動作不具合のある学生のみ実施）：
2018年度は特にトラブルが起きていないので、準備作業は省略する。
アカウントの設定の不具合修正：
※XAMPP の Apache Web Server で URL localhost が表示できない受講生が対象
2016年度は受講生の半数近くが、今回の演習がうまく進まない不具合が確認されました。
2017年度も不具合が起きた場合、対策として以下の方法で設定を変更してください。
それでも、うまく動かない場合は、別途相談ください。
修正方法：
レポートフォルダ → 小橋一秀 → プログラミング入門 → SetProxyOverride.reg ファイルをダブルクリック
※ 設定修正に関する 警告 が表示されますが、 「はい」 で進めてください。
コンピューターを再起動してください。
シナリオ
前振り
雨が降ったときだけ可視化される広告表現 RAINCAMPAIGN
【見えるサウンド】あらゆる科学技術で音楽を「可視化」したMVがヤバい！
情報の可視化
見えないもの（分かりにくい情報）を見えるように（分かりやすく）する工夫
イラストデザインの領域
例）
身体部位と共起するオノマトペを可視化した「オノマトペ芳一さん」（2013）
コインでたどるローマ https://twitter.com/_kobashi/status/938692744804892672
ロボットのサイズ比較（画像検索）
データの可視化
データを整理して「要点を理解しやすくなるように」、伝えたい情報に焦点をあてたグラフ・図表を作成する。
例１）Excel のグラフ作成機能
例２）統計分析ソフトによるデータ可視化
例３）プログラムによるデータ処理。今回はD3.js を利用した例を紹介。
D3.js によるデータの可視化
プログラム D3.js を利用してデータをグラフ化する
D3.js 公式サイト https://d3js.org/
サンプルをいくつか見ておく
お勧め
Force-Directed States of America
D3.js は Data Driven Documents データ ドリブン ドキュメント （データ駆動文書、略して DDD）の作成を支援する JavaScript のライブラリです。
JavaScript は主にブラウザでWebページにプログラムによる機能を持たせるために使用するプログラム言語です。
演習内容
D3.js Gallery D3.jsを利用したグラフの作成例。ここに掲載されたプログラムを利用して、以下の２つのグラフを作成します。
Dendrogram（系統図） http://bl.ocks.org/mbostock/4063570
時間に余裕がある場合は：Chord Diagram http://bl.ocks.org/NPashaP/ba4c802d5ef68f70c019a9706f77ebf1
ツールの準備１：
D3.js はWebコンテンツから利用できるグラフツールです。
Webページを作成してデータとプログラムを埋め込むとグラフが表示される仕組みになっています。
今回はローカルPCでWebサーバを動かしてWebページを作成します。
・大学のWebサーバなど、ネットに公開されたサーバと異なり、ローカルのWebサーバに作成したコンテンツは、学外のネットからアクセスすることはできません。
・ローカルPCのサーバにコンテンツを作成するので、作成したWebページをネットにアップロードする必要はありません。
サーバの起動： 解説動画 ※動画の中では第6回と言っていますが、2018年度は今回の第12回に実施です
■ステップ１
Windowsアイコン（スタート） → XAMPP → XAMPP Control Panel を起動
■ステップ２
Apache(Webサーバ)を Start
コントロールパネルは最小化しておく（閉じてもよい。サーバをStopしない限り、バックグラウンドでサーバは動作している）
■ステップ３
サーバの動作確認をする。
ローカルのアドレス localhost をブラウザで検索する。
※正確には http://localhost/ のURLにアクセスする。
ツールの準備２：
Webページの作成： 解説動画
今回はWebページを作成する専用のツールは使用しない。
Webページ用のコードをエディタ（テキストエディタ）という編集ツールで作成する。
使用するエディタ Visual Studio Code Visual Studio Code早分かりガイド
※ Win版 Mac版が存在する。どちらも無償でDLして利用可能。
■ステップ４
起動方法：
Windowsロゴ（スタート） → Visual Studio Code → Visual Studio Code
※IDEの Visual Studio 2017ではないので注意してください。
日本語言語パックをダウンロードして、メニューを日本語化してもOKです。
設定例：
■ステップ５
VS Code のファイルの保存フォルダを設定します。
以下の手順でWebサーバ（Apache)のドキュメントルート（htdocs）フォルダに設定します。
ファイル → フォルダーを開く
場所： PC → ローカルディスク（D:） → XAMPP → htdocs
フォルダーを選択する。
htdocs のフォルダの中で、次の作業を行う。
■ステップ６
フォルダを作成 フォルダ名 学籍番号
■ステップ７
ファイルを新規作成 ファイル名 index.html
VS Codeの操作について： ファイル作成アイコンとフォルダ作成アイコンを間違えないように注意。
■ステップ８
index.html の記述内容（コピペOK）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
学籍番号
名前
Webページを作りました
</body>
</html>
※補足 HTML という言語でWebを作成します。
< > で囲まれた英単語は タグ と呼ばれるプログラム要素です。
全角文字の部分は、ブラウザに表示されるテキストコンテンツになります。
タグはブラウザに表示されません。
タグは、コンテンツの表示方法を変更するなど、ブラウザが処理する為の印です。
※ ネタ： 生物になったHTML https://twitter.com/SaadAbedine/status/940089276951289856
■ステップ９
ファイル未保存マーク と ファイル保存アイコン
■ステップ１０
ブラウザ（Chrome）で表示を確認する
アドレス localhost/学籍番号
このアドレスでは作業用PC以外の端末（スマフォなど）からは作成したWebページを見ることはできません。
作成したWebを外部に公開するには、公開用のWebサーバにHTMLファイルをアップロードする必要があります。
今回はアップロードはしません。
※ http://192.168.201.pc番号 のアドレスで学内のネットワークから作業PCのサーバが動いている間はアクセスすることができます。
■ステップ１１
記述内容の修正： <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/3118789/ は http://localhost/3118789/index.html と通常は同じように機能する。つまり、ブラウザは index.html ファイルを表示している。
D3.jsによるデータ可視化の課題
グラフの作成１： 解説動画(2017年度バージョン)
■ステップ１３
学籍番号フォルダの下の階層に
フォルダを作成 d3a
■ステップ１４
D3.jsを使用した系統図プログラムの例）
ドラッグアンドドロップしてリンクの繋ぎ変え
ノードクリックで展開と縮小
ドラックで表示位置移動
ホイールでズーム
http://www.robschmuecker.com/d3-js-drag-and-drop-zoomable-tree/
■ステップ１５
D3.jsコードの入手
２０１９年度は、こちらのサイトを利用します。コードをコピペする為に開く。
https://gist.github.com/robschmuecker/7880033
２０１８年度は、こちらのサイトを利用します。
D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing
■ステップ１６
d3a フォルダの下に dndTree.js を新規作成
上記サイトから、dndTree.jsの内容をコピーします。
※Chromeからは正常にコードをコピーできる。IEからは行番号までがコピーされる。
RAWボタンを押してコードだけを表示、Ctrl+Aで全選択すると、コピーが楽にできる。
■ステップ１7
d3a フォルダの下に flare.json を新規作成
上記サイトから、flare.jsonの内容をコピーします。
JSON (JavaScript Object Notation)はJavascriptやWebサービスで広く利用されているデータ形式です。
■ステップ１8
d3a フォルダの下に index.html を新規作成
上記サイトから、index.htmlの内容をコピーします。
■ステップ１9
すべてのファイルを保存する。
■ステップ２０
グラフの表示を確認する。次のアドレスを検索する。
localhost/学籍番号/d3a
■ステップ２１
flare.json のデータを以下のシンプル版に差し替えます。
※ ブラウザは Chromeを推奨。Edgeからコピペすると不具合が出る場合あり。
シンプル版：
{
"name": "flare",
"children": [{
"name": "analytics",
"children": [{
"name": "cluster",
"children": [{
"name": "AgglomerativeCluster",
"size": 3938
}, {
"name": "CommunityStructure",
"size": 3812
}]
}, {
"name": "graph",
"children": [{
"name": "BetweennessCentrality",
"size": 3534
}, {
"name": "LinkDistance",
"size": 5731
}]
}, {
"name": "optimization",
"children": [{
"name": "AspectRatioBanker",
"size": 7074
}]
}]
}]
}
課題作成 JSONデータを書き換えてください。
テーマ 名古屋文理大学の学部・学科構成グラフ など。大学と無関係なテーマでもよい。自由に選んでください。
修正例１）
名古屋文理大学の学部学科構成：
{
"name": "名古屋文理大",
"children": [
{
"name": "健康生活学部",
"children": [
{
"name": "フードビジネス学科"
}
,
{
"name": "健康栄養学科"
}
]
},
{
"name": "情報メディア学部",
"children": [
{
"name": "情報メディア学科"
}
]
}
]
}
修正例２）
index.html の CSS を書き換えて配色を変更：
方法：
vs code で steelbule や red などの色名の記述を変更する。
色名の上にマウスカーソルを重ねるとカラーピッカーを表示できる。
※ circle の fill の色はjavascriptで制御されているのでCSSでは変更できない。
VS Code では、HTMLファイルの編集でカラーピッカーを利用できる。
色を指定しているコードの上（下の例では hsl や rgb の上）で、マウスをホバーさせるとカラーピッカーが表示される。
※ デバッグのヒント ※
上記のJSONの編集で、 { } や [ ] などの括弧の対応関係や , の挿入・削除、文字列の引用符 " " などを正しく編集しないと、D3.jsでグラフを表示することが出来ません。
編集実を見つけるために、VS Code のコード整形機能を利用するとよいでしょう。
ソースのところを右クリックして [ドキュメントのフォーマット] (Alt + Shift + F) を選択する。
または
Alt+Shift+F のショートカットを利用。
JSONコードが階層ごとにインデントして整形されるので、構造の不具合を見つける手助けになります。
時間に余裕のある受講者用
グラフの作成２： 解説動画
フォルダを作成 d3b
d3b フォルダの下に index.html を新規作成
chord Diagramプログラムをコピーする。http://bl.ocks.org/NPashaP/ba4c802d5ef68f70c019a9706f77ebf1
表示を確認 アドレス localhost/学籍番号/d3b
このプログラム用のデータは、ブログラムのソースコード中に存在している。
適当にデータを修正（行を削除、名前を付け替える）
応用 複数の対象の相互関係を可視化しよう。
複数の対象 スポーツのチーム 相互関係 得失点 勝敗
複数の対象 人間 相互関係 好意
など
データ修正例）
チーム名 A B C の3チームの得点状況。
AチームはBチームから6点取得。以下同様。
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入門（ドットインストール）
2017年度バージョン（今回は使いません）。 http://bl.ocks.org/mbostock/4063570
2017年度用資料 開始
id
名古屋文理大学
名古屋文理大学.情報メディア学部
名古屋文理大学.情報メディア学部.情報メディア学科
名古屋文理大学.健康生活学部
名古屋文理大学.健康生活学部.健康栄養学科
名古屋文理大学.健康生活学部.フードビジネス学科
※ 余分な空白行や記号があるとはd3.jsのコードでうまく処理できず、図が表示されない。
レイアウト変更のためのヒント）
index.html の styleに関するコードや、JavaScript を修正します。
文字サイズの変更
.node text {
font: 10px sans-serif;
}
※好みで20px などサイズを大きく変更。
画面のサイズの変更
<svg width="960" height="2000"></svg>
※好みでheight="500" など高さを低く修正して、画面内に収まるように変更。
グラフの表示位置の変更
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(40,0)");
※ 40を80ぐらいに。グラフ全体の基準位置を translate で移動している。左が見切れる場合、数値が大きくなるように修正。
グラフのサイズの変更
var tree = d3.cluster()
.size([height, width - 160]);
※ 160を200ぐらいに。樹形図の葉の部分の各項目の表示の基準位置の調整。右側で項目名が見切れる場合に調整。
応用 分類図、系統図（進化図）、組織図 など、 系統図用のデータを検索などで探し、データを差し替えてみる。
※ デバッグ方法： Chrome の場合、 Ctrl + Shift + I でデバッガが利用できる。コードの実行エラーを確認することで、データやコードの不備を発見できる場合がある。