Dash 및 Plantly Express를 통해 BD에서 얻은 차량 데이터를 시각적으로 표시하는 2

지난번부터 지도에 기재해 차량 데이터를 그리는 방법.
*지난번 보도
Dash 및 Plantly Express를 통해 BD에서 얻은 차량 데이터를 시각화1

이 글의 내용


· 주행 중 GPS 데이터 획득 방법
· 맵박스를 이용해 차량 데이터를 지도에 그리는 방법

운영 환경


macOS Mojave version10.14.5
Python 3.7.2
dash 1.0.0
dash-core-components 1.0.0
dash-html-components 1.0.0
plotly-express 0.3.1
pandas 0.24.2

Macbox 소개


간단한 조작을 통해 독자 지도를 제작할 수 있는 응용 개발자를 위한 플랫폼이다.
원래 지도는OpenStreetMap이어서 저작권을 무료로 이용할 수 있다.또 한 달에 5만 개의 길을 무료로 이용할 수 있다.
*Mapbox
https://www.mapbox.com/
*Mapbox pricing
https://www.mapbox.com/pricing/#maploads

시각화하기 전에 필요한 일 (access token의 획득)


맵박스를 사용하여 맵에 데이터 그리기
제작된 지도를 구할 수 있는access token이 필요합니다.
Dash, Platly Express에서access token을 참조하여 읽은 지도에 그려진 구조입니다.
여기서 지도의 제작 방법과access token의 획득 방법은 사랑을 끊는 것이지만 아래의 글은 매우 참고 가치가 있다.
Macbox로 지도를 보여주세요!

GPS 데이터 검색 방법


BD에서 얻은 데이터에는 위치 정보가 포함되지 않기 때문에 다른 방법으로 얻어야 한다.
먼저 떠오르는 것은 자동차 내비게이션이다. 제조사에 방문 방법을 물어보는 것이 번거롭기 때문에 간단한 앱을 사용하기로 했다.
사용하는 앱은 GPS 로그에서 CSV 만들기인데 이는 CSV에서 앱을 시작하고 있는 아이폰의 위치 정보를 발표하는 대안이다.출발 시 ON, 정차 시 OFF, 주행 중 위치 정보를 입수했다.
CSV 파일은 다음과 같습니다.다행스럽게도 완전히 데이터로 바뀌었다.
그 중에서 사용하는 열은'lat(위도)','lng(경도)','date(날짜 시간)'세 가지가 있다.
이 데이터를 차량 데이터의 데이터 프레임에 추가합니다.

데이터 정형


여기 있다
GPS 로그에서 CSV 생성(Stansislav Svistunov Car Scanner ELM OBD2)과 데이터 로깅을 시작하는 시간이 같다고 가정합니다.즉, 모든 기록은 2019-05-0413시부터 시작된다.각 응용 프로그램이 데이터를 동기화해서 얻는 시간이 없기 때문에 둘은 완전히 연결될 수 없지만 그 시간에'근처'에 차가 있을 것이 틀림없기 때문에 이 방법으로 진행했다.
이하 차량 데이터의 데이터
그 1
GPS 로그에서 CSV 만들기로 만든 CSV를 데이터 프레임으로 변환한 후
"lat (위도)", "lng (경도)"열을 더하면 "날짜 시간 (date)"과 같은 줄만 꺼냅니다.
이렇게 하면 다음 데이터 프레임을 만들 수 있습니다.

먼저 CSV에 저장한 다음 Dash에서 읽습니다.
여기에 도착하면 대시와 plotly-express만 시각화할 수 있습니다.

Dash 및 Platly Express를 사용한 시각화


와 마찬가지로 Dash에서 Plantly Express를 시작합니다.
콜백 밑에 쓴 make.figure 함수에value를 전달하고 컬러의 물리량을 가져옵니다. (DataFrame의 열과 같습니다.)그리고 return px.scatter_mapbox(...) Plantly Express로 그림을 그린 퍼즐을 되돌려줍니다.
단순한 퍼즐맵과 달리 맵박스가 만든 지도에 그려진 그림이다.
이것은px.set_mapbox_access_token 다음에 Mapbox의access token을 적으세요.px.scatter_mapboxlat에서 DateFrame의'위도'열, lon의'경도'열을 대입하면 된다.

import plotly_express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import pandas as pd

GPS = pd.read_csv("上で整形したCSVのパスを書きます")

col_options = [dict(label=x, value=x) for x in GPS.columns]
dimensions = ["value","color"]

app = dash.Dash(
    __name__, external_stylesheets=["https://codepen.io/chriddyp/pen/bWLwgP.css"]
)

app.config['suppress_callback_exceptions']=True

app.layout = html.Div(
    [
        html.H1("Visualization of both OBD and GPS by Dash"),
        html.Div(
            [
                html.P([d + ":", dcc.Dropdown(id=d, options=col_options)])
                for d in dimensions
            ],
            style={"width": "25%", "float": "left"}
        ),
        dcc.Graph(id="graph", style={"width": "75%", "display": "inline-block"}),
    ]
)

@app.callback(Output("graph", "figure"), [Input(d, "value") for d in dimensions])
def make_figure(value,color):
    px.set_mapbox_access_token("ここにMapboxのaccess tokenを書きます")

    return  px.scatter_mapbox(GPS,
                        lat="緯度 (°)",
                        lon="経度 (°)",
                        color=color,
                        size=value,
                        size_max=10,
                        zoom=10,
                        color_continuous_scale=px.colors.cyclical.IceFire,
                        hover_name=value)
  #px.scatter_mapbox(...)はplotly_expressの描画部分

if __name__ == '__main__':
    app.run_server(debug=True)
위의 코드를 실행하면 브라우저에서 다음 프로그램을 시작합니다.
우선value에서'속도(km/h)'를 선택하고 색깔에서'기름 소모량(km/l)'을 선택해 보세요.
이렇게 하면 아래의 도표를 쓸 수 있다.점의 치수는 속도(km/h), 색상은 기름 소비량(km/l)
나타내다
그 1
래정 계천점→(교토 종관도)→탕화온천 주행 데이터입니다.
시내보다 고속도로의 기름 소모량이 더 높다.
그러나 고속 입구의 합류는 불어서 그런지 시내보다 낮다.
다음은 앱입니다. 발견하면 만져주세요. 발견하면 연락 주세요.

둘째 끝


2부에서는 맵박스를 이용해 OBD에서 확보한 차량 데이터를 지도에 그렸다.
다음이 언제일지 몰라요.
Raspberry Pi 사용
데이터 취득→성형→가시화 주행 중onsite에서 진행되는 이야기를 쓰고 싶습니다.

좋은 웹페이지 즐겨찾기