20170909 reafletでお手軽可視化 on_r_20分ver_up用
1 like1,400 views
fukuoka.R #09 https://fukuoka-r.connpass.com/event/63700/
![leafletとは (wikipediaより)
• Leaflet は広く使われているWeb地図のための
JavaScriptライブラリである。 2011年に最初にリ
リースされた[2]。
• モバイルとデスクトップのプラットフォームのほと
んどに対応し、HTML5とCSS3に対応している。
OpenLayersやGoogle Maps API（英語版）とともに
最も⼈気のあるJavaScript地図ライブラリの⼀つで
あり、FourSquare、Pinterest、Flickrなどの有名な
サイトで使われている。
https://ja.wikipedia.org/wiki/Leaflet](https://image.slidesharecdn.com/20170909reafletonr20verup-170910005138/85/20170909-reaflet-on_r_20-ver_up-6-320.jpg)
![例：先ほどのJPJRビルの例
## spパッケージで⽇本測地系 -> 世界測地系へ変換
library(sp)
# 変換元データの⽤意。
locations <- data.frame(latitude=c(33.5849443), longitude=c(130.4214012)) ##⽇本測地系
# SPデータへの変換と測地系設定
coordinates(locations) <- c("longitude", "latitude")
proj4string(locations) <- CRS("+init=epsg:4301") ## 変換前のepsgコード
# WGS84への測地系変換。
locations2 <- spTransform(locations, CRS("+init=epsg:4326")) ## 変換後のepsgコード
## ビフォーアフター
locations
locations2
> locations
SpatialPoints:
longitude latitude
[1,] 130.4214 33.58494
> locations2
SpatialPoints:
longitude latitude
[1,] 130.4191 33.58821](https://image.slidesharecdn.com/20170909reafletonr20verup-170910005138/85/20170909-reaflet-on_r_20-ver_up-41-320.jpg)
![正解との⽐較
福岡県福岡市博多区博多駅中央街8番1号
⽇本測地系： 130.4214012, 33.5849443
世界測地系： 130.4190611, 33.5882078
> locations
SpatialPoints:
longitude latitude
[1,] 130.4214 33.58494
> locations2
SpatialPoints:
longitude latitude
[1,] 130.4191 33.58821
桁を四捨五⼊して揃えると⼀致。
これで測地系の異なるデータもプロットが可能になる](https://image.slidesharecdn.com/20170909reafletonr20verup-170910005138/85/20170909-reaflet-on_r_20-ver_up-42-320.jpg)
![こちらもspパッケージでトライ
http://www.pu-hiroshima.ac.jp/~ttetsuji/R/[69]sp-class.html
library(sp)
library(readr)
library(rgdal)
library(tidyr)
library(dplyr)
#ウイスキーデータ
dat <- readr::read_csv("https://www.mathstat.strath.ac.uk/outreach/nessie/datasets/whiskies.txt")
> dat[,c(2,16:17)]
Source: local data frame [86 x 3]
Distillery Latitude Longitude
(chr) (int) (int)
1 Aberfeldy 286580 749680 ##⚫このままでは使えない
2 Aberlour 326340 842570
3 AnCnoc 352960 839320](https://image.slidesharecdn.com/20170909reafletonr20verup-170910005138/85/20170909-reaflet-on_r_20-ver_up-46-320.jpg)
More Related Content
Similar to 20170909 reafletでお手軽可視化 on_r_20分ver_up用 (20)
More from Nobuaki Oshiro (20)
20170909 reafletでお手軽可視化 on_r_20分ver_up用
- 2. ⾃⼰紹介
- 3. ⾃⼰紹介 • ⼤城信晃 • twitter : doradora09 • 沖縄 出⾝ -> 東京 -> 福岡 • Webエンジニア -> データ分析者 • ヤフー -> DATUM STUDIO -> LINE Fukuoka • 執筆 • Rで始めるビジネス統計分析 (2014) • 勉強会 • TokyoR運営 (2010-2017) • fukuoka.R運営にJOIN (2017- ) • 意思決定のためのデータ分析勉強会 in Fukuoka(2017- )
- 6. leafletとは (wikipediaより) • Leaflet は広く使われているWeb地図のための JavaScriptライブラリである。 2011年に最初にリ リースされた[2]。 • モバイルとデスクトップのプラットフォームのほと んどに対応し、HTML5とCSS3に対応している。 OpenLayersやGoogle Maps API（英語版）とともに 最も⼈気のあるJavaScript地図ライブラリの⼀つで あり、FourSquare、Pinterest、Flickrなどの有名な サイトで使われている。 https://ja.wikipedia.org/wiki/Leaflet
- 8. 基本操作 • 数⾏書くだけで動作します #インストール install.packages("leaflet") library(leaflet) #緯度経度をセット df <- data.frame (id=1:2, lat=c(33.58974, 33.58904), lng=c(130.42059, 130.3996), pop=c("hakata", "tenjin") ) # 描画 m <- leaflet(df) %>% addTiles() %>% addMarkers(lng=~lng, lat=~lat, popup=~pop) m
- 9. 基本操作 • 数⾏書くだけで動作します #インストール install.packages("leaflet") library(leaflet) #緯度経度をセット df <- data.frame (id=1:2, lat=c(33.58974, 33.58904), lng=c(130.42059, 130.3996), pop=c("hakata", "tenjin") ) # 描画 m <- leaflet(df) %>% addTiles() %>% addMarkers(lng=~lng, lat=~lat, popup=~pop) m
- 10. #インストール install.packages("leaflet") library(leaflet) #緯度経度をセット df <- data.frame (id=1:2, lat=c(33.58974, 33.58904), lng=c(130.42059, 130.3996), pop=c("hakata", "tenjin") ) # 描画 m <- leaflet(df) %>% addTiles() %>% addMarkers(lng=~lng, lat=~lat, popup=~pop) m 基本操作 • 数⾏書くだけで動作します マーカーのID 緯度情報 経度情報 ポップアップ 情報 表⽰内容を 指定
- 11. 応⽤ • popupの中はHTMLの 記述も可能です • 画像やリンクも貼れます ## popup⽤意 pop <- c('⼭⼝酒造場<br /><img src="img/⼭⼝酒造場.jpg" width=200>', '⼋⼥中央⼤茶園<br /><img src="img/茶畑.jpg" width=200>', '繁桝<br /><img src="img/しげます.jpg" width=200>', '喜多屋<br /><img src="img/喜多屋.jpg" width=200>')
- 12. おすすめ機能：クラスター化 • 縮尺によってかたまりで俯瞰したい場合に便利 #クラスター化 df2 <- data.frame(id=1:100, lng=130+rnorm(1000), lat=33+rnorm(1000)) leaflet(df2) %>% addTiles() %>% addMarkers(~lng, ~lat, label=~paste0(id,"番"), clusterOptions= markerClusterOptions())
- 13. おすすめ機能：クラスター化 • 縮尺によってかたまりで俯瞰したい場合に便利 #クラスター化 df2 <- data.frame(id=1:100, lng=130+rnorm(1000), lat=33+rnorm(1000)) leaflet(df2) %>% addTiles() %>% addMarkers(~lng, ~lat, label=~paste0(id,"番"), clusterOptions= markerClusterOptions())
- 14. デモ
- 15. その他、できること • %>%を使った重ね書き • 初回表⽰時の位置やズームの設定(setView) • サークル表⽰(addCircles)、ライン表⽰(addPolylines) • 地図タイルの変更(addTilesのattributionパラメタ) • 判例の表⽰(addLegend) • などなど、カスタマイズも可能
- 21. 調査⽅法②： GoogleのAPIを使う 座標を住所に変換する場合は以下が便利 (ただし、2500件/dayのAPI制限あり) >install.packages('ggmap') >library(ggmap) # 住所・緯度経度対応⽤ >ggmap::geocode(ʻ博多駅ʼ, source=“google”, output=“latlon”) Information from URL : http://maps.googleapis.com/maps/api/geocode/json?address=%E5%8D%9A%E5%A4%9A%E9%A7%85& sensor=false lon lat 1 130.4212 33.59024
- 24. 例：このビルの場合 福岡県福岡市博多区博多駅中央街8番1号 世界測地系： 33.5882078, 130.4190611 ⽇本測地系： 33.5849443, 130.4214012
- 29. 測地系とESPGコード： ⾊々な種類がある 測地成果 測地系 楕円体 投影座標系 EPSGコード 測地成果2000 世界測地系 JGD2000 GRS80楕円体 緯度経度 4612 UTM座標系 3097〜3101 平⾯直⾓座標 2443〜2461 WGS84系 WGS84楕円体 緯度経度 4326 UTM座標系 32651〜32656 旧成果 ⽇本測地系TOKYO ベッセル楕円体 緯度経度 4301 UTM座標系 102151〜102156 平⾯直⾓座標系 30161〜30179 ※後述するRの{sp}パッケージで測地系を変換する際は、ESPGコードを使⽤する GISのための測地成果、測地系、楕円体、投影座標系、EPSGコードのまとめ http://d.hatena.ne.jp/tmizu23/20091215/1260868350
- 31. 測地系による違い 国⼟交通省地理院 (3 ⽇本測地系と世界測地系) http://www.gsi.go.jp/LAW/G2000-g2000-h3.htm 東京付近では、⽇本測地系 の経緯度で表されている地 点を、世界測地系の経緯度 で表すと、北⻄⽅向に450m ずれている → 正確な位置をプロットす る際に、測地系は無視でき ないもの
- 32. 測地系を変換しなかった例 某社のAPIから取得した物件 データの緯度経度を元に Google Map上にプロット 原因は、Google Mapでは世 界測地系を採⽤しているの に対し、元データは⽇本測 地系を元に経度緯度を設定 しているため Google Maps APIで緯度経度を元にプロットした マーカーの位置がずれる（測地系変換） https://shimz.me/blog/google-map-api/3103
- 36. 平⾯直⾓座標系 国⼟地理院 (わかりやすい平⾯直⾓座標系) http://www.gsi.go.jp/sokuchikijun/jpc.html#10 1/2500地図のような⽐較的 狭い範囲の地図 に適した座 標系 ⽇本国内を⼟地の状況に合 わせて１９に分割し、第１ 系〜 第１９系と番号付けら れる。 ※地図を扱う上では⽬的と する地点がどの系に含まれ るかを知る必要あり
- 37. (再掲)測地系とESPGコード： データと地図のEPSGコードを揃える必要がある 測地成果 測地系 楕円体 投影座標系 EPSGコード 測地成果2000 世界測地系 JGD2000 GRS80楕円体 緯度経度 4612 UTM座標系 3097〜3101 平⾯直⾓座標 2443〜2461 WGS84系 WGS84楕円体 緯度経度 4326 UTM座標系 32651〜32656 旧成果 ⽇本測地系TOKYO ベッセル楕円体 緯度経度 4301 UTM座標系 102151〜102156 平⾯直⾓座標系 30161〜30179 ※後述するRの{sp}パッケージで測地系を変換する際は、ESPGコードを使⽤する GISのための測地成果、測地系、楕円体、投影座標系、EPSGコードのまとめ http://d.hatena.ne.jp/tmizu23/20091215/1260868350
- 38. ③測地、投影座標系の変換 • Rではspパッケージ • 2003年くらいから使われている模様 • ちなみに近年ではsfというパッケージもあるようです • (今後はこっちが主流？今回は割愛) • Simple featureのデータうまく扱える sfパッケージ参考： http://notchained.hatenablog.com/entry/2017/01/06/213333
- 40. 例：先ほどのJPJRビルの例 ## spパッケージで⽇本測地系 -> 世界測地系へ変換 library(sp) # 変換元データの⽤意。 locations <- data.frame(latitude=c(33.5849443), longitude=c(130.4214012)) ##⽇本測地系 # SPデータへの変換と測地系設定 coordinates(locations) <- c("longitude", "latitude") proj4string(locations) <- CRS("+init=epsg:4301") ## 変換前のepsgコード # WGS84への測地系変換。 locations2 <- spTransform(locations, CRS("+init=epsg:4326")) ## 変換後のepsgコード ## ビフォーアフター locations locations2
- 41. 例：先ほどのJPJRビルの例 ## spパッケージで⽇本測地系 -> 世界測地系へ変換 library(sp) # 変換元データの⽤意。 locations <- data.frame(latitude=c(33.5849443), longitude=c(130.4214012)) ##⽇本測地系 # SPデータへの変換と測地系設定 coordinates(locations) <- c("longitude", "latitude") proj4string(locations) <- CRS("+init=epsg:4301") ## 変換前のepsgコード # WGS84への測地系変換。 locations2 <- spTransform(locations, CRS("+init=epsg:4326")) ## 変換後のepsgコード ## ビフォーアフター locations locations2 > locations SpatialPoints: longitude latitude [1,] 130.4214 33.58494 > locations2 SpatialPoints: longitude latitude [1,] 130.4191 33.58821
- 42. 正解との⽐較 福岡県福岡市博多区博多駅中央街8番1号 ⽇本測地系： 130.4214012, 33.5849443 世界測地系： 130.4190611, 33.5882078 > locations SpatialPoints: longitude latitude [1,] 130.4214 33.58494 > locations2 SpatialPoints: longitude latitude [1,] 130.4191 33.58821 桁を四捨五⼊して揃えると⼀致。 これで測地系の異なるデータもプロットが可能になる
- 43. 紹介：もう少し複雑なケース
- 46. こちらもspパッケージでトライ http://www.pu-hiroshima.ac.jp/~ttetsuji/R/[69]sp-class.html library(sp) library(readr) library(rgdal) library(tidyr) library(dplyr) #ウイスキーデータ dat <- readr::read_csv("https://www.mathstat.strath.ac.uk/outreach/nessie/datasets/whiskies.txt") > dat[,c(2,16:17)] Source: local data frame [86 x 3] Distillery Latitude Longitude (chr) (int) (int) 1 Aberfeldy 286580 749680 ##⚫このままでは使えない 2 Aberlour 326340 842570 3 AnCnoc 352960 839320
- 47. 変換前のepsgコードの⾒極めが⼤切 # 地理座標系の変換（Ordnance Survey National Grid reference system (epsg27700) ->epsg4326） class(dat) <- "data.frame" df_sp_whiskeies <- SpatialPointsDataFrame(coords = cbind(dat$Latitude, dat$Longitude), data = dat, proj4string = CRS("+init=epsg:27700")) sp_whiskeies_proj <- spTransform(df_sp_whiskeies, CRS("+init=epsg:4326")) # leafletで表⽰する場合の緯度経度を抽出したデータフレームを作成 df.coords <- sp_whiskeies_proj %>% as.data.frame() %>% dplyr::select(starts_with("coords")) %>% dplyr::rename(lat = coords.x2, lon = coords.x1) glimpse(df.coords) #変換後の座標 > head(df.coords) lon lat 1 -3.850199 56.62519 ##⚫OK 2 -3.229644 57.46739 3 -2.785295 57.44175
- 48. 蒸溜所の⼀覧のプロットが完成！ # leafletで可視化 leaflet() %>% addMarkers(data = df.coords) %>% addTiles() 1 Aberfeldy 286580 749680 2 Aberlour 326340 842570 3 AnCnoc 352960 839320 1 -3.850199 56.62519 2 -3.229644 57.46739 3 -2.785295 57.44175
- 49. ところで、個⼈的な疑問 • 元々のデータのEPSGコードを知る⽅法 • 元々のデータの作者に聞くしかないでしょうか？ • ⾃動変換、とか総当たり、とか良い⽅法がありましたらアドバ イスいただけると幸いです
- 50. まとめ • 数⾏書くだけで地図上への可視化が可能なleaflet • 旅の思い出をサクッと可視化するのも⾯⽩いかもしれません • 地図への描画の際は測地系や投影座標系を揃えること • Rなら座標取得、変換、地図上への可視化まで⼀通りのパッ ケージが揃っていて便利です • 緯度経度取得： ggmap::geocode • 座標変換：{sp}パッケージ • 今後は{sf}パッケージが便利かも？
- 51. Enjoy !