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.

メディアにおけるWeb gis活用事例

583 views

Published on

FOSS4G TOKAI 2017 講演資料

Published in: Data & Analytics
  • Be the first to comment

メディアにおけるWeb gis活用事例

  1. 1. FOSS4G TOKAI 2017 メディアにおけるWebGIS活用事 例 Created by /Masayuki Shimizu @_shimizu 1
  2. 2. 群馬県高崎市在住 2015年11月 日本経済新聞メディア戦略部 データビジュアライゼーションエンジニア 自己紹介 清水正行 2 . 1
  3. 3. 主なお仕事 2 . 2
  4. 4. 日経:Visual Data 2 . 3
  5. 5. 2 . 4
  6. 6. 2 . 5
  7. 7. 2 . 6
  8. 8. 2 . 7
  9. 9. 2 . 8
  10. 10. 趣味 2 . 9
  11. 11. Blog 2 . 10
  12. 12. VDataコンテンツの作り方 3 . 1
  13. 13. メンバー 記者1人~複数 デザイナー1人 エンジニア1人 作成期間(2週間~4週間)、速報(6時間) 基本内製 一点物が多い 3 . 2
  14. 14. VDataを支える技術 ビジュアライゼーション D3.js WebGISツール leaflet.js truf.js 3 . 3
  15. 15. 事例紹介 4
  16. 16. 難民出入国マップ 5 . 1
  17. 17. 1960年~2013年までの難民移動推移を地図に表示 5 . 2
  18. 18. 要件 選択した年の難民発生国と難民数を円の大きさ で表示 クリックで地域選択 選択された国から受入国までアニメーションで 見せたい 5 . 3
  19. 19. 課題 デザイン要件を満たせるライブラリがない そもそも地理情報をフロントエンドで扱うのが難 しい テンプレートでは要件を満たせないので一から 作る必要がある 5 . 4
  20. 20. D3.js 5 . 5
  21. 21. D3の特徴 データビジュアライゼーションライブラリ デファクトスタンダード 複雑な視覚化表現を作成可能 地理情報を可視化するための機能が豊富 5 . 6
  22. 22. Projection 様々な投影法に対応 Map Projection Transitions 5 . 7
  23. 23. Satellite Projection 5 . 8
  24. 24. D3は難しい? 5 . 9
  25. 25. 10行で日本地図を描画 //Geojson 読 込 d3.json('sample.geojson', function(geojson)){ //投影法初期設定 const projection = d3.geoMercator().fitExtent([[0, 0], [1240, 800]], geojson) //位置情報 変換 関数 生成 const desc = d3.geoPath().projection(projection) //path要素 束縛 const path = svg.selectAll("path").data(geojson.features) //path要素 追加 const appendPath = path.enter().append("path") // 更新 地図 描画 const maps = path.merge(appendPath).attr("d", d => desc(d)) } 5 . 10
  26. 26. 5 . 11
  27. 27. 1行で可視化 //人口 万人以上(緑) 以下(青) 塗 分 maps.attr("fill", d => (d.properties.pop > 20000 ? "green" //群馬県 所属 市区町村 赤 塗 maps.filter(d => d.properties.pref === "群馬県").attr("fill 5 . 12
  28. 28. 5 . 13
  29. 29. D3で地図を描くのは、棒グラフ描 くより楽 5 . 14
  30. 30. 5 . 15
  31. 31. こんなこともできます 5 . 16
  32. 32. 米大統領選変形地図 5 . 17
  33. 33. 米大統領選の開票情報コンテンツ 5 . 18
  34. 34. D3を使うことで従来にはないような表現も可能にな り、難しいデザイン要件にも答えることができるように なったので、今ではvdataに欠かせないツールとなって います。 5 . 19
  35. 35. 市区町村医療費マップ 6 . 1
  36. 36. 市区町村ごとの三大死因率及び医療費を可視化 6 . 2
  37. 37. 要件 全市区町村の医療データを表示したい クリックで地域選択 選択されたデータを散布図に連動 6 . 3
  38. 38. 課題 全てをD3で実装するのは大変 パン・ズーム時の再計算が高負荷 UIが複雑 6 . 4
  39. 39. leaflet.js 6 . 5
  40. 40. leaflet シンプルな地図クライアントライブラリ プラグインが豊富 SVGをオーバーレイすることができるのでD3と連 動させやすい 6 . 6
  41. 41. leafletプラグイン SVGオーバーレイヤーをCSS transformで拡大縮 小する パスを再計算するより圧倒的に軽い L.SvgScaleOverlay.js 6 . 7
  42. 42. leafletとD3を組み合わせて使うことで一般的な地図ク ライアントのユーザー体験そのままに、柔軟なジオビ ジュアライゼーションの作成が可能になりました。 6 . 8
  43. 43. ヒートアイランド 7 . 1
  44. 44. 東京23区内の気温データを可視化 7 . 2
  45. 45. 要件 現状のヒートアイランド対策の問題点がテーマ 約10年分の気温データを分析 東京全体での熱の動きを視覚化したい 7 . 3
  46. 46. 課題 大量のデータを確認してもらう必要がある (1時間毎のデータが10年分×観測地点) 記者はGISを使ったことがない 7 . 4
  47. 47. Turf.js 7 . 5
  48. 48. 地理空間情報のデータ分析を行うためのJSライ ブラリ バッファの生成や、フィーチャの重なり判定など 基本的な機能がある GeoJSONとしてデータを受け取り、GeoJSONとし て計算結果を返す Turf.jsとは 7 . 6
  49. 49. DEMO 7 . 7
  50. 50. Turf + D3で分析用ページを作成 7 . 8
  51. 51. 仕組み turfで観測地点間の気温を補完(IDWグリッド) さらに等高線ポリゴンも生成 turfが出力したデータをD3で描画 7 . 9
  52. 52. 利点 フロントエンドでの地理情報分析ツールの作成 コストが軽減 GISを使ったことのない記者でも分析が可能 設置、配布が楽 社内のweb server, github page, dropbox, electorn etc.. 7 . 10
  53. 53. 汎用的なGISツールやサービスはどうしても使いこなせ る人が限られてしまう。 最近ではこういった、一つのこと(機能)しかできない社 内向け分析ツールをプロジェクト毎に複数作って配布 することが多い。 7 . 11
  54. 54. まとめ 8 . 1
  55. 55. D3やleaflet、turfなどを活用することで、フロントエンド のエンジニアでも地理情報を活用したコンテンツが非 常に作りやすくなっています。現在ではフロントエンド のみならず、内部で使う分析ツールをすばやく作成す るためにも欠かせないツールです。 ぜひ活用してみてください。 8 . 2
  56. 56. Happy Hacking Geovisualization! 8 . 3

×