ExcelとD3.jsのダイナミックな表現をあわせたアドオンE2D3を使って地図を作画してみます。

1. E2D3で地図を
作画してみよう！
第五回 Center CLR 年末会資料
@ueponx

2. 今回のセッションは
E2D3のハンズオンを受けた
ueponxが個人的な理解をベー
スに作成しています。
理解が間違っていることもあ
りますが、何卒ご容赦くださ
い。

3. 自己紹介
• 氏名：上田茂雄（@ueponx）
• インフラ設備の保守
• 好きなもの
特撮（amazonプライム・・・捗る）
アニメ（最近は地獄少女）
電子工作（mbed、Arduino、RaspberryPi）
プログラム（C#、Java、JavaScript、Python）

4. ゴール
みんな大好き（？）「Excel」のアドオン
データヴィジュアライゼーションツール
「E2D3」で地図の作画
を行う

5. データビジュアライゼーション

6. データビジュアライゼーション
日本語では
「データ可視化」

7. データビジュアライゼーション
(ﾟДﾟ)ﾊｧ?

8. 数値・情報から導き出された
知見・ポイントなど
「見えない関係性を
見えるようにする」
プロセス

9. 見える化ではなく、
見える化によって得られる
“気づき”
を生み出すのが目的

10. 既存のデータの見える化って？
Excelでグラフ化

11. 既存のデータの見える化って？
Excelのデータの
グラフ化は静的

12. 既存のデータの見える化って？
操作による対話性や動きのある
グラフの使用により
関連性の理解や気付きが得やすい

13. 既存のデータの見える化って？
Excelさんでは
ちょっと足りない

14. そこでE2D3！

15. Excelと
D3.jsのダイナミック
な表現をあわせた
アドオン

16. D3.js？

17. D3.js？

18. D3 (Data-Driven Documents)
はSVGレンダリングを
サポートする
JavaScriptライブラリ
(http://d3js.org/)

19. http://bl.ocks.org/mbostock/7607535サンプル例
クリックによるスムーズな拡大

20. http://bl.ocks.org/mbostock/5944371サンプル例
クリックによるアニメーション付き拡大

21. E2D3対応環境
•Excel Online
•Excel 2013
•Excel 2016（開発？）
（2015/12/22現在）

22. E2D3を使ってみよう！
一番お手軽に体験する方法
→OneDriveで「Excelブック」を新規作成
1. OneDriveでExcelブックを新規作成
2. Excel Onlineの挿入メニューから
Officeアドインを選択
3. 検索BOXにE2D3を入力して検索開始
4. 「信頼する」をクリック！
5. あとは自由に実験！

34. nagoya-color
のように地図を
描画するには？

35. nagoya-color
をパクった地図を
描画するには？

36. 開発を行う必要性

37. 手順

38. ①開発環境の準備
②地図データの準備
③geojsonの生成
④topojsonへ変換
⑤E2D3への取込

39. ①開発環境の準備

40. 1. githubからe2d3-contribを
Fork(https://github.com/e2d3/e2d3-
contrib)
2. e2d3.cmdを実行
3. Ctrlを5回押し、右上の
【Go into delegate mode】
をクリック

43. Forkした以下のそれぞれの
フォルダがアドオンサンプルに対応
コピーすることで類似のサンプルを
作成可能
nagoya-colorをkanazawa-colorへ

44. ②地図データの準備

45. 地図データをダウンロード
地図データは公共機関などが公開
（地図データは一般的にはjsonフォーマット
で公開していないので変換処理が必要）
例）E-STAT 総務省の政府統計ポータルサイト
https://www.e-stat.go.jp/SG1/estat/eStatTopPortal.do

46. 地図データをダウンロード

47. ダウンロードするもの
世界測地系の
shpファイル

48. 意外とサイトのつくりが
アレなので注意

49. ③geojsonの生成

50. QGIS
を使用する

51. QGIS（http://qgis.org/ja/site/）
shpファイルを
GUI操作するだけで
geojsonファイルへ簡単変換

63. ④topojsonへ変換

64. topojson
を使用する

65. topojson
（https://github.com/mbostock/topojson）
geojsonをtopojsonに
変換する
node.jsアプリ

66. topojsonの事前準備
1. node.jsのインストール
2. npmでtopojsonパッケージを
インストール

67. 基本的には変換するだけで良いがそのあとのことを考えて
属性名をnagoya-colorと揃える
（※）属性の設定をしないと今回のお手軽変更ができない
-pオプションをつけることで属性名の変更を行うことができます。
topojsonの使い方
geojsonの属性 topojsonの属性
KEN_NAME prefecture
GST_NAME city
MOJI ward

68. ⑤E2D3へ取込

69. ファイルのコピー元のファイルがnagoya.topojsonなのでmain.js内の
nagoyaの部分をkanazawaに変更

70. リロード

72. データが表示できません

73. main.jsで地図を表示する
処理を調べると・・・
中心点、縮尺、図法の設定している部分が見つかる。
そこで金沢の中心と思われる経度緯度を設定！

75. 真っ黒ではありますが
これで表示されました

76. フォルダ内の
data.csv
にデータを入れると…

79. ちなみに

80. サンプルに入っていた
北緯35.15 東経136.95
名古屋の中心は川名でした

81. サンプルに入っていた
北緯35.15 東経136.95
名古屋の中心は川名でした

83. まとめ

84. E2D3を使って
Excel上で
地図を表示する手順を
追ってみました

85. データ
ビジュアライゼーション
の手法をおさらいしたに過ぎない

86. 本来の目的

87. 対話的な操作を用いた
地図を使って

88. 「データ」を
わかりやすく表示し、
「気付き」を生むこと

89. みなさんも
E2D3で
データビジュアライゼーション
初めてみませんか？