Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

E2D3で地図を作画してみよう

1,605 views

Published on

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

Published in: Software
  • Be the first to comment

E2D3で地図を作画してみよう

  1. 1. E2D3で地図を 作画してみよう! 第五回 Center CLR 年末会資料 @ueponx
  2. 2. 今回のセッションは E2D3のハンズオンを受けた ueponxが個人的な理解をベー スに作成しています。 理解が間違っていることもあ りますが、何卒ご容赦くださ い。
  3. 3. 自己紹介 • 氏名:上田茂雄(@ueponx) • インフラ設備の保守 • 好きなもの 特撮(amazonプライム・・・捗る) アニメ(最近は地獄少女) 電子工作(mbed、Arduino、RaspberryPi) プログラム(C#、Java、JavaScript、Python)
  4. 4. ゴール みんな大好き(?)「Excel」のアドオン データヴィジュアライゼーションツール 「E2D3」で地図の作画 を行う
  5. 5. データビジュアライゼーション
  6. 6. データビジュアライゼーション 日本語では 「データ可視化」
  7. 7. データビジュアライゼーション (゚Д゚)ハァ?
  8. 8. 数値・情報から導き出された 知見・ポイントなど 「見えない関係性を 見えるようにする」 プロセス
  9. 9. 見える化ではなく、 見える化によって得られる “気づき” を生み出すのが目的
  10. 10. 既存のデータの見える化って? Excelでグラフ化
  11. 11. 既存のデータの見える化って? Excelのデータの グラフ化は静的
  12. 12. 既存のデータの見える化って? 操作による対話性や動きのある グラフの使用により 関連性の理解や気付きが得やすい
  13. 13. 既存のデータの見える化って? Excelさんでは ちょっと足りない
  14. 14. そこでE2D3!
  15. 15. Excelと D3.jsのダイナミック な表現をあわせた アドオン
  16. 16. D3.js?
  17. 17. D3.js?
  18. 18. D3 (Data-Driven Documents) はSVGレンダリングを サポートする JavaScriptライブラリ (http://d3js.org/)
  19. 19. http://bl.ocks.org/mbostock/7607535サンプル例 クリックによるスムーズな拡大
  20. 20. http://bl.ocks.org/mbostock/5944371サンプル例 クリックによるアニメーション付き拡大
  21. 21. E2D3対応環境 •Excel Online •Excel 2013 •Excel 2016(開発?) (2015/12/22現在)
  22. 22. E2D3を使ってみよう! 一番お手軽に体験する方法 →OneDriveで「Excelブック」を新規作成 1. OneDriveでExcelブックを新規作成 2. Excel Onlineの挿入メニューから Officeアドインを選択 3. 検索BOXにE2D3を入力して検索開始 4. 「信頼する」をクリック! 5. あとは自由に実験!
  23. 23. nagoya-color のように地図を 描画するには?
  24. 24. nagoya-color をパクった地図を 描画するには?
  25. 25. 開発を行う必要性
  26. 26. 手順
  27. 27. ①開発環境の準備 ②地図データの準備 ③geojsonの生成 ④topojsonへ変換 ⑤E2D3への取込
  28. 28. ①開発環境の準備
  29. 29. 1. githubからe2d3-contribを Fork(https://github.com/e2d3/e2d3- contrib) 2. e2d3.cmdを実行 3. Ctrlを5回押し、右上の 【Go into delegate mode】 をクリック
  30. 30. Forkした以下のそれぞれの フォルダがアドオンサンプルに対応 コピーすることで類似のサンプルを 作成可能 nagoya-colorをkanazawa-colorへ
  31. 31. ②地図データの準備
  32. 32. 地図データをダウンロード 地図データは公共機関などが公開 (地図データは一般的にはjsonフォーマット で公開していないので変換処理が必要) 例)E-STAT 総務省の政府統計ポータルサイト https://www.e-stat.go.jp/SG1/estat/eStatTopPortal.do
  33. 33. 地図データをダウンロード
  34. 34. ダウンロードするもの 世界測地系の shpファイル
  35. 35. 意外とサイトのつくりが アレなので注意
  36. 36. ③geojsonの生成
  37. 37. QGIS を使用する
  38. 38. QGIS(http://qgis.org/ja/site/) shpファイルを GUI操作するだけで geojsonファイルへ簡単変換
  39. 39. ④topojsonへ変換
  40. 40. topojson を使用する
  41. 41. topojson (https://github.com/mbostock/topojson) geojsonをtopojsonに 変換する node.jsアプリ
  42. 42. topojsonの事前準備 1. node.jsのインストール 2. npmでtopojsonパッケージを インストール
  43. 43. 基本的には変換するだけで良いがそのあとのことを考えて 属性名をnagoya-colorと揃える (※)属性の設定をしないと今回のお手軽変更ができない -pオプションをつけることで属性名の変更を行うことができます。 topojsonの使い方 geojsonの属性 topojsonの属性 KEN_NAME prefecture GST_NAME city MOJI ward
  44. 44. ⑤E2D3へ取込
  45. 45. ファイルのコピー元のファイルがnagoya.topojsonなのでmain.js内の nagoyaの部分をkanazawaに変更
  46. 46. リロード
  47. 47. データが表示できません
  48. 48. main.jsで地図を表示する 処理を調べると・・・ 中心点、縮尺、図法の設定している部分が見つかる。 そこで金沢の中心と思われる経度緯度を設定!
  49. 49. 真っ黒ではありますが これで表示されました
  50. 50. フォルダ内の data.csv にデータを入れると…
  51. 51. ちなみに
  52. 52. サンプルに入っていた 北緯35.15 東経136.95 名古屋の中心は川名でした
  53. 53. サンプルに入っていた 北緯35.15 東経136.95 名古屋の中心は川名でした
  54. 54. まとめ
  55. 55. E2D3を使って Excel上で 地図を表示する手順を 追ってみました
  56. 56. データ ビジュアライゼーション の手法をおさらいしたに過ぎない
  57. 57. 本来の目的
  58. 58. 対話的な操作を用いた 地図を使って
  59. 59. 「データ」を わかりやすく表示し、 「気付き」を生むこと
  60. 60. みなさんも E2D3で データビジュアライゼーション 初めてみませんか?

×