2015年10月15日(木)に行われたCode for YOKOHAMAオープンデータハンズオン Vol.4「データをグラフで可視化してみよう！」での資料です。 地図の地点に関するレビュー情報や、センサー測定データをd3.jsを使ってグラフで可視化する方法を学びます。 講師： 矢崎 裕一 氏（東京大学空間情報科学研究センター／visualizing.jp主宰／Code for Tokyo代表） 主催：横浜市経済局 協力：Code for YOKOHAMA 事務局：NPO法人横浜コミュニティデザイン・ラボ ＜講師プロフィール＞ ・ 矢崎 裕一（やざき ゆういち）氏 株式会社ビジネス・アーキテクツにてアートディレクターを経験後、2008年に独立。データ・ビジュアライゼーションの実践的な手法や実例を紹介するサイト、visualizing.jpの運営、Code for Tokyoや Data Visualization Japanなどのコミュニティーの立ち上げと運営など、データ・ビジュアライゼーションの実践と普及に関する様々な活動をおこなっている。 *************************************************************************** https://www.facebook.com/events/869739876466315/

1. 「データをグラフで可視化してみよう！」
Code for YOKOHAMA オープンデータハンズオン Vol.4
矢崎 裕一
平成27年度横浜市経済局 オープンデータ活用ビジネス化支援事業

2. 東京大学 空間情報科学研究センター
http://www.csis.u-tokyo.ac.jp/japanese/index.html

3. http://codefor.tokyo/

4. http://visualizing.jp/

5. DataVisualizationJapan(Facebookグループ)
https://www.facebook.com/groups/datavizjapan/

6. 医療ビッグデータ勉強会
https://www.facebook.com/groups/338084979676310/
image by Kenichiro Ono

7. 三大都市圏の人の流れ
http://structure-and-representation.com/works/prefecturalMigrants/

8. http://structure-and-representation.com/works/odd/

10. DPC data -A
http://n1n9.jp/dataviz/asdjh2014/tokyo_dynamic/

11. DPC data-B
http://n1n9.jp/dataviz/asdjh2014/tokyo_static/

12. ＴＰＰ 巨大経済圏の実力
http://vdata.nikkei.com/prj2/tpp/

13. 事例紹介

14. http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-
curve-economic-growth.html

15. https://www.chromeexperiments.com/experiment/arms-globe

16. https://interactive.twitter.com/oscars2015race/

17. http://localprojects.net/clients/page/2/?client=911-memorial
9/11 Memorial Names Arrangement Software

18. http://lauren-mccarthy.com/usplus/
us+

19. Nicholas Felton
http://feltron.com/

21. http://spending.jp/

22. 基本的な考え方

23. 人間の認知能力に合わせて抽象化して、
特徴を理解できるものにする

24. 「なるほど！」と思って共感する
なるほど！

25. そのことによって…
なるほど！
• 行動が変わる
• 記憶に残る
• 人に話したくなる

26. 関係
Scatterplot
比較
Bar Chart
Candlestick Chart
分布
地図 ネットワーク
Hitogram
Scatterplot
構成
Pie Chart
Donut Chart
TreeMap
変化（時間）
Bar Chart
Line Chart
Area Chart

27. データの用意の仕方

28. 扱い方のポイント
ExcelやPDFで公開されているファ
イルの作り方は、印刷やディスプレ
イ表示をした際に人が認識しやすい
書式で作られている。
一方データとして扱う場合には不要
な書式、不要な情報が多く含まれて
いる。これを取り除く必要がある。

29. 行政の提供する統計データファイルはShift JISであることが多い。
1.文字コード
ExcelやAdobe Illustrator日本語版ではShift JISという文字
コードを採用している。
Shift JISは日本語のみの文字コードで、現在はUTF-8という
多様な言語体系を含んだ文字コードが標準的に使用されている。
扱い方のポイント
ウェブで使用するファイル、様々なアプリで使用するファイルは
UTF-8へ変換する必要がある。

30. MultiTextConverter
1.文字コード扱い方のポイント
http://www.rk-k.com/software/mtc
nkf
http://dev.classmethod.jp/tool/
exchange-file-encode-by-nkf/
mi
http://www.mimikaki.net/

31. ※Excelで作業する前提です。
2.不 いな書式を える
実データの表記とExcelが適用する
表記法を切り分ける。
→Excelが適用する表記法をリセッ
トし、実データの表記のみが表示さ
れるようにする。
扱い方のポイント
Mac: 「書式」→「セル」
Windows: リボンメニュー「ホーム」
「表示形式」タブで標準（特定の形
式を指定しない）を選ぶ。

32. 例：
数値における3桁ごとのカンマ区切り
を取り除く
例：
値が入る欄に単位も含まれている場
合があるので取り除く
例：
データとして使わない部分は取り除く
2.不 いな書式を える扱い方のポイント

33. Excel1シートに含まれるデータ １グラフに必要なデータ
3.一シートに含まれる情報量扱い方のポイント

34. テキストエディタ → Excel という移動
4.アプリ間のデータ移動扱い方のポイント
CSV／TSVファイル
「ファイルを開く」
機能で開く
エディタからExcelへ
コピー＆ペースト
1 2a
2b
csv, tsv…OK
csv…NG, tsv…OK
UTF-8…文字化けする
UTF-8…文字化けしない

35. Excel → テキストエディタ という移動
4.アプリ間のデータ移動扱い方のポイント
Excelファイル
CSV/TSVで保存し
たものを「ファイル
を開く」機能で開く
Excelからエディタへ
コピー＆ペースト
1 2a
2b

36. 4.アプリ間のデータ移動扱い方のポイント
Excel ←→ テキストエディタ間のデータの移動は
「TSV形式（タブ区切り形式）をコピペする」のが最も楽！
ベストプラクティス

37. •コラムごとのデータ形式の変換
•データ形式が間違っているものを検出（数値のコラムに
文字列がある、など）
•データの重複を探し出す
•表記揺れの解消
•エラー値の検出と処理
•空白の検出と処理
•使うアプリやプログラム言語に合わせた書式への変更
5.データのクレンジング扱い方のポイント

38. http://openrefine.org/
5.データのクレンジング扱い方のポイント
https://github.com/
DataVisualizationJapan/
OpenRefine/tree/
localization-to-ja
日本語版を
配布しています
※Javaのインストール
が必要です

39. ハンズオン

40. http://vega.github.io/vega/

41. http://vega.github.io/vega-editor/

42. vega
JSONデータ Canvas か SVG

43. JSONデータ
"data": [
{
"name": "table",
"values": [
{"category":"A",
"amount":28},
{"category":"B",
"amount":55}
]
}
],

44. グループ名
JSONデータ
"data": [
{
"name": "table",
"values": [
{"category":"A",
"amount":28},
{"category":"B",
"amount":55}
]
}
],
変数名とその値

45. JSONデータ
Visualization……一番外枠の大きさ
Data………………視覚表現の定義とデータ
Scales……………データの値と視覚的表現の対応関係
Axes………………軸
Legends…………凡例
Marks………………データを表現するのに使う、基本となる形を定義
Group Marks……他のMarkを内包する、特別なMark
Signals……………インタラクションの振る舞いを定義
Predicates………Markの見た目を変更する際の条件を定義

46. 用意されているチャート（Staticのみ例示）
■分布と比較
arc
■変化
area
■比較
bar
■分布を比較
barley
■コロプレスマップ（アメリカ地図）
choropleth
■時系列の変化
driving
■比較
error
■ネットワーク
force
■分布の仕方を比較
grouped_bar
■分布
heatmap
■比較
image
■分布の仕方を比較
jobs

47. 用意されているチャート（Staticのみ例示）
■歴史
lifelines
■世界地図
map
■多変量データ
parallel_coords
■時系列の変化
playfair
■人口ピラミッド
population
■内訳
treemap
■分布の仕方を比較
scatter_matrix
stacked_area
stacked_bar
■時系列での比較
stocks
■時系列での比較
weather
■定性データ
wordcloud

48. 自分でサイトを設置する-1
npm run vendor
https://github.com/vega/vega-editor

49. 自分でサイトを設置する-2
vendorフォルダを作り、
上記ファイル構成になるように
ファイルを設置