Plotly Time Series 차트 만들기

Author

Gabriel Yang

1. Plotly Time Series 차트데이터 준비하기

시간 시리즈 차트는 데이터가 시간에 따라 어떻게 변하는지를 시각화하는 데 매우 유용한 도구입니다. 시간에 따른 변화 패턴을 직관적으로 이해할 수 있게 해주기 때문에 금융, 경제, 과학 등 다양한 분야에서 널리 사용됩니다.

시간 시리즈 차트를 만들기 위해선 시간 축에 매핑될 데이터가 필요합니다. 이번 예제에서는 간단한 주식 가격 데이터를 사용해보겠습니다. 아래의 데이터는 날짜와 해당 날짜의 주가를 포함한 데이터프레임입니다.

import pandas as pd

data = {
    'Date': ['2023-01-01', '2023-02-01', '2023-03-01', '2023-04-01', '2023-05-01'],
    'Price': [100, 110, 105, 115, 120]
}

df = pd.DataFrame(data)
df.info()
<class 'pandas.core.frame.DataFrame'>
RangeIndex: 5 entries, 0 to 4
Data columns (total 2 columns):
 #   Column  Non-Null Count  Dtype 
---  ------  --------------  ----- 
 0   Date    5 non-null      object
 1   Price   5 non-null      int64 
dtypes: int64(1), object(1)
memory usage: 212.0+ bytes

시간 시리즈 차트를 만들 때 날짜 형식의 데이터를 만드는 것은 중요합니다. 초기에 생성한 데이터 프레임은 Date열이 object형식으로 저장되었습니다. 시간에 따른 데이터의 변화를 확인하기 위해서는 날짜 형식을 변환이 필요합니다.

df['Date'] = pd.to_datetime(df['Date'])  # 날짜 형식 변환
display(df.info())
display(df)
<class 'pandas.core.frame.DataFrame'>
RangeIndex: 5 entries, 0 to 4
Data columns (total 2 columns):
 #   Column  Non-Null Count  Dtype         
---  ------  --------------  -----         
 0   Date    5 non-null      datetime64[ns]
 1   Price   5 non-null      int64         
dtypes: datetime64[ns](1), int64(1)
memory usage: 212.0 bytes
None
Date Price
0 2023-01-01 100
1 2023-02-01 110
2 2023-03-01 105
3 2023-04-01 115
4 2023-05-01 120

Date열을 날짜 형식으로 변경하기 위해서 to_datetime()을 사용합니다. 이제 datetime64[ns]형식으로 변경된 Date열을 얻었습니다. 여기서 Date는 시간 축으로 사용할 날짜 데이터이고, Price는 각 날짜에 해당하는 주식 가격입니다.

3. 기본 시간 시리즈 차트 만들기

Plotly의 go.Figure 객체를 사용하여 기본적인 시간 시리즈 차트를 만들 수 있습니다. go.Scatter를 사용해 선형 그래프(line plot)를 그릴 수 있으며, mode='lines' 옵션을 통해 선형 그래프 모드를 지정합니다.

import plotly.graph_objs as go

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=df['Date'],
    y=df['Price'],
    mode='lines',
    name='Stock Price'
))

fig.update_layout(
    title='Stock Price Over Time',
    xaxis_title='Date',
    yaxis_title='Price'
)

fig.show()

위의 코드는 Date를 x축으로, Price를 y축으로 하는 시간 시리즈 차트를 생성합니다. 이 차트는 기본적인 선형 그래프입니다.

4. 차트 커스터마이징하기

Plotly의 강력한 기능 중 하나는 차트를 쉽게 커스터마이징할 수 있다는 점입니다. 다음은 차트를 커스터마이징하는 몇 가지 방법입니다.

4.1 마커 추가

선 그래프에 마커를 추가하면 각 데이터 포인트를 더 잘 강조할 수 있습니다.

fig.add_trace(go.Scatter(
    x=df['Date'],
    y=df['Price'],
    mode='lines+markers',  # 선과 마커를 동시에 표시
    name='Stock Price with Markers'
))

fig.show()

4.2 차트 색상 변경

차트의 색상을 변경하여 더 매력적으로 만들 수 있습니다. line 속성을 사용해 선의 색상을 지정할 수 있습니다.

fig.add_trace(go.Scatter(
    x=df['Date'],
    y=df['Price'],
    mode='lines+markers',
    line=dict(color='royalblue', width=4),
    name='Customized Stock Price'
))

fig.show()

4.3 축 포맷팅

날짜 축의 포맷을 변경하여 더 명확하게 표시할 수 있습니다.

fig.update_layout(
    xaxis=dict(
        tickformat='%Y-%m',  # 연도-월 형식으로 표시
        tickangle=-45  # 눈금 라벨의 각도 조정
    ),
    yaxis=dict(
        title='Price (USD)',
        tickprefix='$'  # y축 값 앞에 달러 표시 추가
    )
)

fig.show()

5. 상호작용 기능 추가하기

Plotly의 또 다른 강력한 기능은 차트에 상호작용 요소를 쉽게 추가할 수 있다는 점입니다. 예를 들어, 특정 구간을 확대하거나 축소할 수 있는 슬라이더를 추가합니다.

시간축 슬라이더 생성하기

시간축 슬라이더는 차트 하단에 생성되며 사용자가 자신이 원하는 시간 영역을 선택할 수 있도록 도와줍니다.

fig = go.Figure()

fig.add_trace(go.Scatter(
    x=df['Date'],
    y=df['Price'],
    mode='lines+markers',
    line=dict(color='royalblue', width=4),
    name='Customized Stock Price'
))

fig.update_layout(
    xaxis=dict(
        rangeslider=dict(visible=True),  # 하단에 슬라이더 추가
        type='date'
    )
)

fig.show()

이제 차트 하단의 슬라이더를 통해서 자신이 원하는 시간 영역의 데이터를 확인할 수 있습니다.

시간축 버튼 생성하기

rangeselector는 사용자가 특정 시간 범위를 쉽게 선택할 수 있도록 도와주는 버튼들을 차트에 추가하는 역할을 합니다.

fig.update_layout(
    xaxis=dict(
        rangeselector=dict(
            buttons=list([
                dict(count=1, label='1m', step='month', stepmode='backward'),
                dict(count=6, label='6m', step='month', stepmode='backward'),
                dict(step='all')
            ])
        ),
        rangeslider=dict(visible=True),  # 하단에 슬라이더 추가
        type='date'
    )
)

코드설명

  • buttons: 사용자가 선택할 수 있는 버튼들의 리스트를 정의합니다. 각각의 버튼은 dict 형식으로 정의되며, 다양한 설정을 통해 버튼의 동작을 제어할 수 있습니다.

  • 첫 번째 버튼

    dict(count=1, label='1m', step='month', stepmode='backward')
    • count=1: 이 버튼은 한 단위의 기간을 선택합니다.
    • label=‘1m’: 버튼에 표시될 레이블로, 여기서는 “1m” (1개월)로 설정되어 있습니다.
    • step=‘month’: ‘month’ 단위로 시간을 조정합니다. 이 경우, 1개월 단위로 차트가 조정됩니다.
    • stepmode=‘backward’: 현재 날짜를 기준으로 과거로 1개월을 선택합니다. 즉, 이 버튼을 클릭하면 사용자는 차트에서 최근 1개월의 데이터를 볼 수 있습니다.

  • 마지막 버튼:

    dict(step='all')
    • step=‘all’: 이 버튼은 차트에 있는 모든 데이터를 표시합니다. 특정 기간을 선택하지 않고 전체 데이터 범위를 보고 싶을 때 유용합니다.
    • 이 버튼에는 count, stepmode 등의 추가 설정이 필요하지 않습니다.

stepmode 설정

stepmode는 Plotly에서 rangeselector의 버튼 동작을 제어하는 옵션입니다. stepmode에는 두 가지 옵션이 있습니다.

  1. "backward":
    • 현재 날짜를 기준으로 과거의 특정 기간을 선택합니다.
    • 예를 들어, step='month', count=1, stepmode='backward'로 설정하면 현재 날짜로부터 이전 1개월의 데이터를 보여줍니다.
    • 이 모드가 주로 사용됩니다. 사용자가 특정 과거 기간 (예: 지난 1개월, 6개월)을 빠르게 선택할 수 있도록 합니다.
  2. "todate":
    • 현재 날짜가 속한 기간의 시작점부터 현재 날짜까지의 데이터를 선택합니다.
    • 예를 들어, step='month', count=1, stepmode='todate'로 설정하면 해당 월의 첫날부터 현재 날짜까지의 데이터를 보여줍니다.
    • 이 모드는 달력 기준으로 기간을 선택할 때 유용합니다. 예를 들어, 현재 날짜가 2024년 9월 1일이라면, stepmode='todate'는 2024년 9월 1일에 해당 월의 1일부터 데이터를 표시합니다.

이 두 가지 옵션을 사용하여 사용자가 데이터를 탐색할 때 더 직관적이고 유연한 인터페이스를 제공할 수 있습니다.