Plotly Time Series 날짜 범위 UI 사용하기

Data Visualization

Plotly Time Series 날짜 범위를 지정하는 방법을 정리합니다.

Author

gabriel yang

Published

September 25, 2023

Plotly Time Series 날짜 범위 지정 하기

시계열 데이터의 날짜 범위를 잘 사용하면 데이터의 의미를 다양한 관점으로 이해할 수 있습니다. 시계열 데이터를 시각화 시 날짜 범위를 설정하는 방법을 정리합니다.

import plotly.express as px

import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')
display(df.head(3))
display(df.tail(3))

	Date	AAPL.Open	AAPL.High	AAPL.Low	AAPL.Close	AAPL.Volume	AAPL.Adjusted	dn	mavg	up	direction
0	2015-02-17	127.489998	128.880005	126.919998	127.830002	63152400	122.905254	106.741052	117.927667	129.114281	Increasing
1	2015-02-18	127.629997	128.779999	127.449997	128.720001	44891700	123.760965	107.842423	118.940333	130.038244	Increasing
2	2015-02-19	128.479996	129.029999	128.330002	128.449997	37362400	123.501363	108.894245	119.889167	130.884089	Decreasing

	Date	AAPL.Open	AAPL.High	AAPL.Low	AAPL.Close	AAPL.Volume	AAPL.Adjusted	dn	mavg	up	direction
503	2017-02-14	133.470001	135.089996	133.250000	135.020004	32815500	135.020004	115.175718	125.953499	136.731280	Increasing
504	2017-02-15	135.520004	136.270004	134.619995	135.509995	35501600	135.509995	115.545035	126.723499	137.901963	Decreasing
505	2017-02-16	135.669998	135.899994	134.839996	135.350006	22118000	135.350006	116.203299	127.504333	138.805366	Decreasing

시계열 데이터를 시각화하기 위해서 불러온 데이터를 확인합니다. 데이터프레임의 Date컬럼에 날짜 정보가 있습니다. 처음과 마지막 3개의 데이터를 확인하면 데이터에 2015년 2월부터 2017년 2월까지의 데이터가 있는 것을 알 수 있습니다.

나머지 컬럼은 Apple 주가의 상한가, 하한가, 종가등의 정보를 갖습니다. Apple의 상한가를 Line plot으로 확인합니다.

fig = px.line(df, x='Date', y='AAPL.High')
fig.show()

2015년 부터 2017년까지의 주가 정보를 Line plot으로 시각화 했습니다.

날짜 범위 지정

시계열 데이터를 좀 더 자세히 확인하기 위해서 x축으로 표시할 날짜 범위를 지정합니다. 2016년 3월부터 2016년 7월까지의 정보를 확인하기 위해서 날짜범위를 지정합니다.

fig = px.line(df, x='Date', y='AAPL.High', range_x=['2016-03-01','2016-7-31'])
fig.show()

전체 데이터에서 range_x로 지정한 날짜 사이의 데이터만 Line plot에 표시됩니다.

슬라이더 UI 사용하기

슬라이더 UI를 사용하면 사용자가 원하는 날짜 범위를 설정하고 날짜를 변경할 수 있습니다.

fig = px.line(df, x='Date', y='AAPL.High', title='Time Series with Rangeslider')

fig.update_xaxes(rangeslider_visible=True)
fig.show()

update_xaxes()에 rangeslider_visible 옵션을 True로 선택해서 x축에 슬라이더 UI를 사용합니다.

사용자는 그래프 하단의 날짜 범위 슬라이더의 양쪽 끝의 흰색 바를 이동하여 날짜 범위를 변경합니다. 슬라이더 내부를 선택한 상태로 이동시켜 날짜 범위의 위치를 변경할 수 있습니다.

버튼 UI 사용하기

특정한 날짜 범위를 버튼으로 제공해서 사용자가 일정 날짜 범위로 데이터를 확인할 수 있습니다. update_xaxes()함수로 x축에 대한 설정을 변경합니다. rangeselector옵션에 버튼에 대한 정보를 딕셔너리 형태로 전달해서 버튼을 생성합니다.

buttons을 생성하기 위한 정보는 buttons API문서에서 확인할 수 있습니다. step을 통해서 날짜범위위의 단위를 결정하고 count를 통해서 범위횟수, stepmode는 현재 시점에서 어떤 방향로 날짜범위를 결정합니다.

fig = px.line(df, x='Date', y='AAPL.High', title='Time Series with Range Slider and Selectors')

fig.update_xaxes(
    rangeslider_visible=True,
    rangeselector=dict(
        buttons=list([
            dict(count=1, label="1m", step="month", stepmode="backward"),
            dict(count=6, label="6m", step="month", stepmode="backward"),
            dict(count=1, label="YTD", step="year", stepmode="todate"),
            dict(count=1, label="1y", step="year", stepmode="backward"),
            dict(step="all")
        ])
    )
)
fig.show()

그래프 위쪽의 날짜 버튼을 선택해서 슬라이더 UI가 어떻게 변경되는 지 확인해보세요.