Fitbitが計測したライドデータとSTRAVAに連携したデータの比較(座標編)
おはようございます。Takum!です。
続いて、緯度・経度情報にも差があるようなので、実際に地図にプロットしてみてみたいと思います。
地図へのプロットは、Leafletを使います。HTML+JavaScriptで簡単に地図上にラインやピンを落とすことができます。JavaScriptでデータを使うために、作ってあるDataFrameをCSVにします。
出力されたCSVを、JavaScriptで読めるように下記の形に変形します。
2019-01-31 08:22:48,53.1,38.260033,140.8758
続いて、緯度・経度情報にも差があるようなので、実際に地図にプロットしてみてみたいと思います。
地図へのプロットは、Leafletを使います。HTML+JavaScriptで簡単に地図上にラインやピンを落とすことができます。JavaScriptでデータを使うために、作ってあるDataFrameをCSVにします。
df_strava.to_csv('strava.csv')
df_fitbit.to_csv('fitbit.csv')
出力されたCSVを、JavaScriptで読めるように下記の形に変形します。
2019-01-31 08:22:48,53.1,38.260033,140.8758
↓
[082248,53.1,38.260033,140.8758],
こういう編集は、サクラエディタ等で正規表現での置換をすると一発です。
^→[
2019-01-31 →空白
:→空白
$→],
これらをHTMLにコーディングしてやると、実態が見えてきました。
| 赤いピンがSTRAVA、青いピンがFitbit。 STRAVAの動きに比べてFitbitはなめらかである。 地図の出典は国土地理院。 |
赤いピンがSTRAVAで、青いピンがFitbitです。STRAVAのほうが左右にブレているのに対し、青いほうは緩やかに付いて行っているように見えます。各ピンの記録された時刻を見ると、Fitbitのほうが1秒ほど早いタイムスタンプが付いていました。
このデータから推測されることは、Fitbitの座標は前後数秒間の移動平均を取るなどして、平滑化していそうだということ。それに比べて、STRAVAのほうはダイレクトに座標を保存しているように見えます。
同じようなアクティビティ記録アプリでもデータの扱いが微妙に異なるんですね。
次はいよいよ走行距離の乖離について調べていきたいと思います。
今回のLeafletを使ったプロットのソースは下記のとおりです。
<!DOCTYPE html>
<html>
・・・
<div id="mapid" style="width:100%;height:60vh;"></div>
・・・
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/leaflet.js"></script>
<script type="text/javascript">
var MAP_URL='https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png';
var MAP_ATTR='<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>';
var pos = [(初期ビューの緯度), (初期ビューの経度)];
var blueMarker = L.icon({
iconUrl:'css/images/marker-icon.png',
iconSize:[25,41], iconAnchor:[12,20], popupAnchor:[0,-25]});
var redMarker = L.icon({
iconUrl:'css/images/marker-icon-red.png',
iconSize:[25,41], iconAnchor:[12,20], popupAnchor:[0,-25]});
stravas = [
[082248,53.1,38.260033,140.8758],・・・・
];
fitbits=[
[082239,58.7,9394.23,115,38.259937,140.87572],・・・・
];
var mymap = L.map('mapid').setView(pos, 14);
L.tileLayer(MAP_URL, {
maxZoom: 20,
attribution: MAP_ATTR
}).addTo(mymap);
for (i=0;i<stravas.length;i++){
var marker;
marker = L.marker([stravas[i][2],stravas[i][3]], {draggable:false,icon:redMarker}).addTo(mymap);
marker.bindPopup(stravas[i][0]+'/'+stravas[i][1]);
}
for (i=0;i<fitbits.length;i++){
var marker;
marker = L.marker([fitbits[i][4],fitbits[i][5]], {draggable:false,icon:blueMarker}).addTo(mymap);
marker.bindPopup(fitbits[i][0]+'/'+fitbits[i][1]+'/'+fitbits[i][2]);
}
</script>
</body>
</html>
コメント
コメントを投稿
コメントをどうぞ。