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

Weitere ähnliche Inhalte

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

H11_ハイブリッドワーク時代に加速する、現場を含めたホンモノ DX - Microsoft 365 Frontline Worker ソリューション [...
H11_ハイブリッドワーク時代に加速する、現場を含めたホンモノ DX - Microsoft 365 Frontline Worker ソリューション [...H11_ハイブリッドワーク時代に加速する、現場を含めたホンモノ DX - Microsoft 365 Frontline Worker ソリューション [...
H11_ハイブリッドワーク時代に加速する、現場を含めたホンモノ DX - Microsoft 365 Frontline Worker ソリューション [...日本マイクロソフト株式会社
 
VJCD 2017 Microsoft Cloud Developer Seminar in Hanoi
VJCD 2017 Microsoft Cloud Developer Seminar in HanoiVJCD 2017 Microsoft Cloud Developer Seminar in Hanoi
VJCD 2017 Microsoft Cloud Developer Seminar in HanoiSeiji Noro
 
巨大なDXの潮流の中で、開発現場からできることはあるか
巨大なDXの潮流の中で、開発現場からできることはあるか巨大なDXの潮流の中で、開発現場からできることはあるか
巨大なDXの潮流の中で、開発現場からできることはあるかDaiki Kawanuma
 
Impact on projects of technologies presented at TechED2022 (Japanese)
Impact on projects of technologies presented at TechED2022 (Japanese)Impact on projects of technologies presented at TechED2022 (Japanese)
Impact on projects of technologies presented at TechED2022 (Japanese)Yoshihisa Yanagawa
 
A04_これがデジタル変革だ!3 か月で B2C の WEB ポータルをスクラッチした Microsoft クラウドネイティブ の開発事例 [Micros...
A04_これがデジタル変革だ!3 か月で B2C の WEB ポータルをスクラッチした Microsoft クラウドネイティブ の開発事例 [Micros...A04_これがデジタル変革だ!3 か月で B2C の WEB ポータルをスクラッチした Microsoft クラウドネイティブ の開発事例 [Micros...
A04_これがデジタル変革だ!3 か月で B2C の WEB ポータルをスクラッチした Microsoft クラウドネイティブ の開発事例 [Micros...日本マイクロソフト株式会社
 
N07_ニューノーマルな社会変化を見据えたモビリティサービスを中心とした取り組みの紹介 [Microsoft Japan Digital Days]
N07_ニューノーマルな社会変化を見据えたモビリティサービスを中心とした取り組みの紹介 [Microsoft Japan Digital Days]N07_ニューノーマルな社会変化を見据えたモビリティサービスを中心とした取り組みの紹介 [Microsoft Japan Digital Days]
N07_ニューノーマルな社会変化を見据えたモビリティサービスを中心とした取り組みの紹介 [Microsoft Japan Digital Days]日本マイクロソフト株式会社
 
201802 利根川講演 in 仙台
201802 利根川講演 in 仙台201802 利根川講演 in 仙台
201802 利根川講演 in 仙台Yuta Tonegawa
 
Android IoTとプログラミング教育
Android IoTとプログラミング教育Android IoTとプログラミング教育
Android IoTとプログラミング教育Kenichi Yoshida
 
利根川講演@プログラミング教育明日会議 2017
利根川講演@プログラミング教育明日会議 2017利根川講演@プログラミング教育明日会議 2017
利根川講演@プログラミング教育明日会議 2017Yuta Tonegawa
 
Low-Codeプログラミングシステム Node-REDとその応用
Low-CodeプログラミングシステムNode-REDとその応用Low-CodeプログラミングシステムNode-REDとその応用
Low-Codeプログラミングシステム Node-REDとその応用HiroyasuNishiyama1
 
【デブサミ2010】アジリティを向上させる開発ツールの進化
【デブサミ2010】アジリティを向上させる開発ツールの進化【デブサミ2010】アジリティを向上させる開発ツールの進化
【デブサミ2010】アジリティを向上させる開発ツールの進化智治 長沢
 
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法Yuta Matsumura
 
Developers summit-2017-day2-room d-chatops-with-b2b
Developers summit-2017-day2-room d-chatops-with-b2bDevelopers summit-2017-day2-room d-chatops-with-b2b
Developers summit-2017-day2-room d-chatops-with-b2bKoichi Sasaki
 
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~Yuichi Saotome
 
運用してわかったLookerの本質的メリット : Data Engineering Study #8
運用してわかったLookerの本質的メリット : Data Engineering Study #8運用してわかったLookerの本質的メリット : Data Engineering Study #8
運用してわかったLookerの本質的メリット : Data Engineering Study #8Masatoshi Abe
 
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017Yuki Okada
 
Citrix virtual appsを活用した自治体職員のワークスタイル変革
Citrix virtual appsを活用した自治体職員のワークスタイル変革Citrix virtual appsを活用した自治体職員のワークスタイル変革
Citrix virtual appsを活用した自治体職員のワークスタイル変革Yasunobu Fukasawa
 
201712 利根川講演 in 松江
201712 利根川講演 in 松江201712 利根川講演 in 松江
201712 利根川講演 in 松江Yuta Tonegawa
 

Ähnlich wie メディアにおけるWeb gis活用事例 (20)

H11_ハイブリッドワーク時代に加速する、現場を含めたホンモノ DX - Microsoft 365 Frontline Worker ソリューション [...
H11_ハイブリッドワーク時代に加速する、現場を含めたホンモノ DX - Microsoft 365 Frontline Worker ソリューション [...H11_ハイブリッドワーク時代に加速する、現場を含めたホンモノ DX - Microsoft 365 Frontline Worker ソリューション [...
H11_ハイブリッドワーク時代に加速する、現場を含めたホンモノ DX - Microsoft 365 Frontline Worker ソリューション [...
 
VJCD 2017 Microsoft Cloud Developer Seminar in Hanoi
VJCD 2017 Microsoft Cloud Developer Seminar in HanoiVJCD 2017 Microsoft Cloud Developer Seminar in Hanoi
VJCD 2017 Microsoft Cloud Developer Seminar in Hanoi
 
巨大なDXの潮流の中で、開発現場からできることはあるか
巨大なDXの潮流の中で、開発現場からできることはあるか巨大なDXの潮流の中で、開発現場からできることはあるか
巨大なDXの潮流の中で、開発現場からできることはあるか
 
Impact on projects of technologies presented at TechED2022 (Japanese)
Impact on projects of technologies presented at TechED2022 (Japanese)Impact on projects of technologies presented at TechED2022 (Japanese)
Impact on projects of technologies presented at TechED2022 (Japanese)
 
A04_これがデジタル変革だ!3 か月で B2C の WEB ポータルをスクラッチした Microsoft クラウドネイティブ の開発事例 [Micros...
A04_これがデジタル変革だ!3 か月で B2C の WEB ポータルをスクラッチした Microsoft クラウドネイティブ の開発事例 [Micros...A04_これがデジタル変革だ!3 か月で B2C の WEB ポータルをスクラッチした Microsoft クラウドネイティブ の開発事例 [Micros...
A04_これがデジタル変革だ!3 か月で B2C の WEB ポータルをスクラッチした Microsoft クラウドネイティブ の開発事例 [Micros...
 
N07_ニューノーマルな社会変化を見据えたモビリティサービスを中心とした取り組みの紹介 [Microsoft Japan Digital Days]
N07_ニューノーマルな社会変化を見据えたモビリティサービスを中心とした取り組みの紹介 [Microsoft Japan Digital Days]N07_ニューノーマルな社会変化を見据えたモビリティサービスを中心とした取り組みの紹介 [Microsoft Japan Digital Days]
N07_ニューノーマルな社会変化を見据えたモビリティサービスを中心とした取り組みの紹介 [Microsoft Japan Digital Days]
 
201802 利根川講演 in 仙台
201802 利根川講演 in 仙台201802 利根川講演 in 仙台
201802 利根川講演 in 仙台
 
Android IoTとプログラミング教育
Android IoTとプログラミング教育Android IoTとプログラミング教育
Android IoTとプログラミング教育
 
利根川講演@プログラミング教育明日会議 2017
利根川講演@プログラミング教育明日会議 2017利根川講演@プログラミング教育明日会議 2017
利根川講演@プログラミング教育明日会議 2017
 
Low-Codeプログラミングシステム Node-REDとその応用
Low-CodeプログラミングシステムNode-REDとその応用Low-CodeプログラミングシステムNode-REDとその応用
Low-Codeプログラミングシステム Node-REDとその応用
 
About Istio
About IstioAbout Istio
About Istio
 
【デブサミ2010】アジリティを向上させる開発ツールの進化
【デブサミ2010】アジリティを向上させる開発ツールの進化【デブサミ2010】アジリティを向上させる開発ツールの進化
【デブサミ2010】アジリティを向上させる開発ツールの進化
 
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
 
Developers summit-2017-day2-room d-chatops-with-b2b
Developers summit-2017-day2-room d-chatops-with-b2bDevelopers summit-2017-day2-room d-chatops-with-b2b
Developers summit-2017-day2-room d-chatops-with-b2b
 
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~
 
運用してわかったLookerの本質的メリット : Data Engineering Study #8
運用してわかったLookerの本質的メリット : Data Engineering Study #8運用してわかったLookerの本質的メリット : Data Engineering Study #8
運用してわかったLookerの本質的メリット : Data Engineering Study #8
 
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
 
Citrix virtual appsを活用した自治体職員のワークスタイル変革
Citrix virtual appsを活用した自治体職員のワークスタイル変革Citrix virtual appsを活用した自治体職員のワークスタイル変革
Citrix virtual appsを活用した自治体職員のワークスタイル変革
 
201712 利根川講演 in 松江
201712 利根川講演 in 松江201712 利根川講演 in 松江
201712 利根川講演 in 松江
 
Dojojag shima dis-tver-20170524
Dojojag shima dis-tver-20170524Dojojag shima dis-tver-20170524
Dojojag shima dis-tver-20170524
 

Mehr von 清水 正行

趣味駆動学習法
趣味駆動学習法趣味駆動学習法
趣味駆動学習法清水 正行
 
Data Visualization meetup 2017
Data Visualization meetup 2017Data Visualization meetup 2017
Data Visualization meetup 2017清水 正行
 
データビジュアライゼーションの作り方
データビジュアライゼーションの作り方データビジュアライゼーションの作り方
データビジュアライゼーションの作り方清水 正行
 
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのかデータビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのか清水 正行
 
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話清水 正行
 
D3.jsによるDOM操作
D3.jsによるDOM操作D3.jsによるDOM操作
D3.jsによるDOM操作清水 正行
 

Mehr von 清水 正行 (6)

趣味駆動学習法
趣味駆動学習法趣味駆動学習法
趣味駆動学習法
 
Data Visualization meetup 2017
Data Visualization meetup 2017Data Visualization meetup 2017
Data Visualization meetup 2017
 
データビジュアライゼーションの作り方
データビジュアライゼーションの作り方データビジュアライゼーションの作り方
データビジュアライゼーションの作り方
 
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのかデータビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
 
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
 
D3.jsによるDOM操作
D3.jsによるDOM操作D3.jsによるDOM操作
D3.jsによるDOM操作
 

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