Suche senden
Hochladen
メディアにおけるWeb gis活用事例
•
2 gefällt mir
•
1,921 views
清水 正行
Folgen
FOSS4G TOKAI 2017 講演資料
Weniger lesen
Mehr lesen
Daten & Analysen
Melden
Teilen
Melden
Teilen
1 von 56
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Bot Builder V4 SDK + QnA Maker / LUIS
Bot Builder V4 SDK + QnA Maker / LUIS
Yoshitaka Seo
IoTビジネス共創ラボ 第2回ドローンWG勉強会(2018/07/25)
IoTビジネス共創ラボ 第2回ドローンWG勉強会(2018/07/25)
博宣 今村
M5Stackで始めるIoT入門
M5Stackで始めるIoT入門
Akira Hatsune
R04_WHITEROOM ではじめるコラボレーティブコンピューティング [Microsoft Japan Digital Days]
R04_WHITEROOM ではじめるコラボレーティブコンピューティング [Microsoft Japan Digital Days]
日本マイクロソフト株式会社
サーバーレス・スクラム開発の速効性とは
サーバーレス・スクラム開発の速効性とは
ShuheiHonma
Windows 10 20H2はどうなる
Windows 10 20H2はどうなる
Tomokazu Kizawa
.NETはインテリジェントエッジの夢を見る
.NETはインテリジェントエッジの夢を見る
Akira Hatsune
kintonedevcamp-vol5-kintonepossibility
kintonedevcamp-vol5-kintonepossibility
Takashi Ushirosako
Weitere ähnliche Inhalte
Ähnlich wie メディアにおけるWeb gis活用事例
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 Hanoi
Seiji Noro
巨大なDXの潮流の中で、開発現場からできることはあるか
巨大なDXの潮流の中で、開発現場からできることはあるか
Daiki Kawanuma
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...
日本マイクロソフト株式会社
N07_ニューノーマルな社会変化を見据えたモビリティサービスを中心とした取り組みの紹介 [Microsoft Japan Digital Days]
N07_ニューノーマルな社会変化を見据えたモビリティサービスを中心とした取り組みの紹介 [Microsoft Japan Digital Days]
日本マイクロソフト株式会社
201802 利根川講演 in 仙台
201802 利根川講演 in 仙台
Yuta Tonegawa
Android IoTとプログラミング教育
Android IoTとプログラミング教育
Kenichi Yoshida
利根川講演@プログラミング教育明日会議 2017
利根川講演@プログラミング教育明日会議 2017
Yuta Tonegawa
Low-CodeプログラミングシステムNode-REDとその応用
Low-CodeプログラミングシステムNode-REDとその応用
HiroyasuNishiyama1
About Istio
About Istio
Hideaki Tokida
【デブサミ2010】アジリティを向上させる開発ツールの進化
【デブサミ2010】アジリティを向上させる開発ツールの進化
智治 長沢
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
Yuta Matsumura
Developers summit-2017-day2-room d-chatops-with-b2b
Developers summit-2017-day2-room d-chatops-with-b2b
Koichi Sasaki
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~
Yuichi Saotome
運用してわかったLookerの本質的メリット : Data Engineering Study #8
運用してわかったLookerの本質的メリット : Data Engineering Study #8
Masatoshi Abe
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
Yuki Okada
Citrix virtual appsを活用した自治体職員のワークスタイル変革
Citrix virtual appsを活用した自治体職員のワークスタイル変革
Yasunobu Fukasawa
201712 利根川講演 in 松江
201712 利根川講演 in 松江
Yuta Tonegawa
Dojojag shima dis-tver-20170524
Dojojag shima dis-tver-20170524
嶋 是一 (Yoshikazu SHIMA)
Ähnlich wie メディアにおけるWeb gis活用事例
(20)
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 Hanoi
巨大なDXの潮流の中で、開発現場からできることはあるか
巨大なDXの潮流の中で、開発現場からできることはあるか
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...
N07_ニューノーマルな社会変化を見据えたモビリティサービスを中心とした取り組みの紹介 [Microsoft Japan Digital Days]
N07_ニューノーマルな社会変化を見据えたモビリティサービスを中心とした取り組みの紹介 [Microsoft Japan Digital Days]
201802 利根川講演 in 仙台
201802 利根川講演 in 仙台
Android IoTとプログラミング教育
Android IoTとプログラミング教育
利根川講演@プログラミング教育明日会議 2017
利根川講演@プログラミング教育明日会議 2017
Low-CodeプログラミングシステムNode-REDとその応用
Low-CodeプログラミングシステムNode-REDとその応用
About Istio
About Istio
【デブサミ2010】アジリティを向上させる開発ツールの進化
【デブサミ2010】アジリティを向上させる開発ツールの進化
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
Developers summit-2017-day2-room d-chatops-with-b2b
Developers summit-2017-day2-room d-chatops-with-b2b
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~
運用してわかったLookerの本質的メリット : Data Engineering Study #8
運用してわかったLookerの本質的メリット : Data Engineering Study #8
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
Citrix virtual appsを活用した自治体職員のワークスタイル変革
Citrix virtual appsを活用した自治体職員のワークスタイル変革
201712 利根川講演 in 松江
201712 利根川講演 in 松江
Dojojag shima dis-tver-20170524
Dojojag shima dis-tver-20170524
Mehr von 清水 正行
趣味駆動学習法
趣味駆動学習法
清水 正行
Data Visualization meetup 2017
Data Visualization meetup 2017
清水 正行
データビジュアライゼーションの作り方
データビジュアライゼーションの作り方
清水 正行
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
清水 正行
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
清水 正行
D3.jsによるDOM操作
D3.jsによるDOM操作
清水 正行
Mehr von 清水 正行
(6)
趣味駆動学習法
趣味駆動学習法
Data Visualization meetup 2017
Data Visualization meetup 2017
データビジュアライゼーションの作り方
データビジュアライゼーションの作り方
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
データビジュアライゼーションはなぜ「コストが高い」と言われるのか
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
D3.jsによるDOM操作
D3.jsによるDOM操作
メディアにおけるWeb gis活用事例
1.
FOSS4G TOKAI 2017 メディアにおけるWebGIS活用事 例 Created
by /Masayuki Shimizu @_shimizu 1
2.
群馬県高崎市在住 2015年11月 日本経済新聞メディア戦略部 データビジュアライゼーションエンジニア 自己紹介 清水正行 2 . 1
3.
主なお仕事 2 . 2
4.
日経:Visual Data 2 .
3
5.
2 . 4
6.
2 . 5
7.
2 . 6
8.
2 . 7
9.
2 . 8
10.
趣味 2 . 9
11.
Blog 2 . 10
12.
VDataコンテンツの作り方 3 . 1
13.
メンバー 記者1人~複数 デザイナー1人 エンジニア1人 作成期間(2週間~4週間)、速報(6時間) 基本内製 一点物が多い 3 . 2
14.
VDataを支える技術 ビジュアライゼーション D3.js WebGISツール leaflet.js truf.js 3 . 3
15.
事例紹介 4
16.
難民出入国マップ 5 . 1
17.
1960年~2013年までの難民移動推移を地図に表示 5 . 2
18.
要件 選択した年の難民発生国と難民数を円の大きさ で表示 クリックで地域選択 選択された国から受入国までアニメーションで 見せたい 5 . 3
19.
課題 デザイン要件を満たせるライブラリがない そもそも地理情報をフロントエンドで扱うのが難 しい テンプレートでは要件を満たせないので一から 作る必要がある 5 . 4
20.
D3.js 5 . 5
21.
D3の特徴 データビジュアライゼーションライブラリ デファクトスタンダード 複雑な視覚化表現を作成可能 地理情報を可視化するための機能が豊富 5 . 6
22.
Projection 様々な投影法に対応 Map Projection Transitions 5
. 7
23.
Satellite Projection 5 .
8
24.
D3は難しい? 5 . 9
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.
5 . 11
27.
1行で可視化 //人口 万人以上(緑) 以下(青)
塗 分 maps.attr("fill", d => (d.properties.pop > 20000 ? "green" //群馬県 所属 市区町村 赤 塗 maps.filter(d => d.properties.pref === "群馬県").attr("fill 5 . 12
28.
5 . 13
29.
D3で地図を描くのは、棒グラフ描 くより楽 5 . 14
30.
5 . 15
31.
こんなこともできます 5 . 16
32.
米大統領選変形地図 5 . 17
33.
米大統領選の開票情報コンテンツ 5 . 18
34.
D3を使うことで従来にはないような表現も可能にな り、難しいデザイン要件にも答えることができるように なったので、今ではvdataに欠かせないツールとなって います。 5 . 19
35.
市区町村医療費マップ 6 . 1
36.
市区町村ごとの三大死因率及び医療費を可視化 6 . 2
37.
要件 全市区町村の医療データを表示したい クリックで地域選択 選択されたデータを散布図に連動 6 . 3
38.
課題 全てをD3で実装するのは大変 パン・ズーム時の再計算が高負荷 UIが複雑 6 . 4
39.
leaflet.js 6 . 5
40.
leaflet シンプルな地図クライアントライブラリ プラグインが豊富 SVGをオーバーレイすることができるのでD3と連 動させやすい 6 . 6
41.
leafletプラグイン SVGオーバーレイヤーをCSS transformで拡大縮 小する パスを再計算するより圧倒的に軽い L.SvgScaleOverlay.js 6 .
7
42.
leafletとD3を組み合わせて使うことで一般的な地図ク ライアントのユーザー体験そのままに、柔軟なジオビ ジュアライゼーションの作成が可能になりました。 6 . 8
43.
ヒートアイランド 7 . 1
44.
東京23区内の気温データを可視化 7 . 2
45.
要件 現状のヒートアイランド対策の問題点がテーマ 約10年分の気温データを分析 東京全体での熱の動きを視覚化したい 7 . 3
46.
課題 大量のデータを確認してもらう必要がある (1時間毎のデータが10年分×観測地点) 記者はGISを使ったことがない 7 . 4
47.
Turf.js 7 . 5
48.
地理空間情報のデータ分析を行うためのJSライ ブラリ バッファの生成や、フィーチャの重なり判定など 基本的な機能がある GeoJSONとしてデータを受け取り、GeoJSONとし て計算結果を返す Turf.jsとは 7 . 6
49.
DEMO 7 . 7
50.
Turf + D3で分析用ページを作成 7
. 8
51.
仕組み turfで観測地点間の気温を補完(IDWグリッド) さらに等高線ポリゴンも生成 turfが出力したデータをD3で描画 7 . 9
52.
利点 フロントエンドでの地理情報分析ツールの作成 コストが軽減 GISを使ったことのない記者でも分析が可能 設置、配布が楽 社内のweb server, github
page, dropbox, electorn etc.. 7 . 10
53.
汎用的なGISツールやサービスはどうしても使いこなせ る人が限られてしまう。 最近ではこういった、一つのこと(機能)しかできない社 内向け分析ツールをプロジェクト毎に複数作って配布 することが多い。 7 . 11
54.
まとめ 8 . 1
55.
D3やleaflet、turfなどを活用することで、フロントエンド のエンジニアでも地理情報を活用したコンテンツが非 常に作りやすくなっています。現在ではフロントエンド のみならず、内部で使う分析ツールをすばやく作成す るためにも欠かせないツールです。 ぜひ活用してみてください。 8 . 2
56.
Happy Hacking Geovisualization! 8 .
3
Jetzt herunterladen